@charset "utf-8";
/* CSS Document */

    @font-face {
    font-family: 'Khula Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Khula Regular'), url('../fonts/Khula-Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Khula Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Khula Regular'), url('../fonts/Khula-Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Khula Light';
    font-style: normal;
    font-weight: normal;
    src: local('Khula Light'), url('../fonts/Khula-Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Khula Light';
    font-style: normal;
    font-weight: normal;
    src: local('Khula Light'), url('../fonts/Khula-Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Khula SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Khula SemiBold'), url('../fonts/Khula-SemiBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Khula SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Khula SemiBold'), url('../fonts/Khula-SemiBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Khula Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Khula Bold'), url('../fonts/Khula-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Khula Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Khula Bold'), url('../fonts/Khula-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Khula ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Khula ExtraBold'), url('../fonts/Khula-ExtraBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Khula ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Khula ExtraBold'), url('../fonts/Khula-ExtraBold.woff') format('woff');
    }


@font-face {
    font-family: webflow-icons;
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)format("truetype");
    font-weight: 400;
    font-style: normal
}


/* #### Generated By: http://www.cufonfonts.com #### */

    @font-face {
    font-family: 'Montserrat Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Regular'), url('Montserrat-Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Italic'), url('Montserrat-Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Thin'), url('Montserrat[wght].woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Thin Italic'), url('Montserrat-Italic[wght].woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Thin'), url('Montserrat-Thin.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Thin Italic'), url('Montserrat-ThinItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat ExtraLight'), url('Montserrat-ExtraLight.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat ExtraLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat ExtraLight Italic'), url('Montserrat-ExtraLightItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Light';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Light'), url('Montserrat-Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Light Italic'), url('Montserrat-LightItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Medium'), url('Montserrat-Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Medium Italic'), url('Montserrat-MediumItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat SemiBold'), url('Montserrat-SemiBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat SemiBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat SemiBold Italic'), url('Montserrat-SemiBoldItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Bold'), url('Montserrat-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Bold Italic'), url('Montserrat-BoldItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat ExtraBold'), url('Montserrat-ExtraBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat ExtraBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat ExtraBold Italic'), url('Montserrat-ExtraBoldItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Black';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Black'), url('Montserrat-Black.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Montserrat Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Black Italic'), url('Montserrat-BlackItalic.woff') format('woff');
    }

/* Gilroy #### */

    @font-face {
    font-family: 'Gilroy-Bold ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Bold ☞'), url('../fonts/Gilroy-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Heavy ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Heavy ☞'), url('../fonts/Gilroy-Heavy.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Light ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Light ☞'), url('../fonts/Gilroy-Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Medium ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Medium ☞'), url('../fonts/Gilroy-Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Regular ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Regular ☞'), url('../fonts/Gilroy-Regular.woff') format('woff');
    }





/* INDEX PAGE Styles */

/* General Styles */

	body {
		padding: 0px!important;
		margin: 0px!important;
		max-width:100%!important;
		overflow-x: hidden!important;
		background:black!important;
	}

	
	.body--container {
		overflow: hidden;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 500px;
		height: 150vh;
		background-color: #6772e5;
		margin-top: 60rem;
	}


	main {width: 100%;display: block!important;position:relative;}
    
    body .main-article {
		margin-top: -2rem!important;
		padding-left: 5rem!important;
		padding-right: 5rem!important;
	}

	
	article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {display: block;}

	section {
	  display: flex;
	  flex-direction: column;
	  align-items: start;
	}

	section:not(.hero):nth-child(even) {}

	.clear {
	  clear: both;
	}
	img {
	  max-width: 100%;
	  border: 0px;
	}
	ul,
	ol {
	  list-style: none;
	}
	a {
	  text-decoration: none;
	  color: inherit;
	  outline: none;
	  transition: all 0.4s ease-in-out;
	  -webkit-transition: all 0.4s ease-in-out;
	}
	a:focus,
	a:active,
	a:visited,
	a:hover {
	  text-decoration: none;
	  outline: none;
	}
	a:hover {
	  color: #e73700;
	}

	button {
	  outline: none !important;
	}

	.blu {background-color:#353cf7;}

	.btn {
		padding: 1.2rem 2rem;
		box-shadow: 0 1rem 2rem rgba(var(--color-primary-dark-code), 0.15), 0 1rem 1rem rgba(var(--color-primary-dark-code), 0.05);
		border-radius: 15rem;
		text-transform: uppercase;
		font-weight: 500;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		transition: 0.3 ease-in-out;
		min-height: 57px;
		box-sizing: border-box;
		font-size: 1.2rem!important;
	}

	.button-pl.a-cta {display: inline-flex;}
	.button-pl {text-align: center;object-fit: fill;}
	.button-pl {
		background-color: var(--pl-purple-main);
		color: #fff;
		text-align: center;
		letter-spacing: -.015em;
		white-space: nowrap;
		border-radius: 8rem;
		justify-content: center;
		align-items: center;
		padding: 1.2rem 2.5rem!important;
		font-size: 30px;
		font-weight: 500;
		line-height: 1;
		text-decoration: none;
		transition: all .2s;
		display: block;
	}
	.w-button {
		color: #fff;
		line-height: inherit;
		cursor: pointer;
		background-color: #3898ec;
		border: 0;
		border-radius: 15rem!important;
		padding: 9px 35px;
		text-decoration: none;
		display: inline-block;
		font-size:20px!important;
		font-family: 'Khula Regular', sans-serif!important;

	}
	input.w-button {-webkit-appearance: button}
    video .videoindex{padding-left:14rem!important;padding-right:14rem!important;}
	.videoindex{margin-top:4rem!important;border-radius:1.4rem!important;}
	.vid2 video{margin-top:7rem!important;}


/* Headings Styles */

	

	.hero h1 {
	  margin-bottom: 15px;
	  color: #353cf7;
	  padding-left: 28rem!important;
	  padding-right: 28rem!important;
	  font-size:60px!important;
	  font-weight: 900!important;
	  line-height: 1.1;
	  font-family: 'Gilroy-Bold ☞', sans-serif!important;
	  animation: loadProfile 0.6s ease-in-out;
      animation-fill-mode: both;
	}

	.hero h2 {
	  font-family: 'Khula Regular', sans-serif;	  
	  margin-bottom: 30px;
	  color:white;
	  padding-left:33rem;
	  padding-right:33rem;
	  font-size:30px!important;
	  font-weight: 600;
	}
    	
	h2 {
	  font-family: 'Khula Regular', sans-serif;	  
	  font-size: 30px!important;
	  padding-top:2rem;
	  padding-bottom:3rem;
	  padding-left:0rem;
	  padding-right:0rem;
	  color:#232323;
	  font-weight: 600;
	  line-height: 1.1;
	}

    section h3.title {
	  font-family: 'Gilroy-Bold ☞', sans-serif!important;	  
	  margin-bottom: 30px;
	  text-align: center;
	}

	.content h3{
	  font-size: 25px!important;	
	  color:white!important;
	  padding-top:2rem!important;
	  font-family: 'Khula Regular', sans-serif!important;

	}

	h3 {
	  font-family: 'Gilroy-Bold ☞', sans-serif!important;	  
	  font-size: 40px!important;
	  padding-top:0rem;
	  padding-bottom:0.5rem;
	  padding-left:0rem;
	  padding-right:0rem;
	  color:#232323;
	  font-weight: 600;
	  line-height: 1.1;
	}

	h4 {
	  font-family: 'Gilroy-Bold ☞', sans-serif!important;	  
	  font-size: 45px!important;
	  padding-top:2rem;
	  padding-bottom:3rem;
	  padding-left:5rem;
	  padding-right:5rem;
	  color:#232323;
	  font-weight: 600;
	  line-height: 1.1;
	}

	h5 {
	    font-family: 'Gilroy-Bold ☞', sans-serif!important;	  
		font-size: 1.4rem;
		font-weight: 300;
		margin: 11px 0 9px;
		letter-spacing: .3px;
		color: #7d9dd6;
	}

	.count-column h2{font-size: 1.5em!important;}

	body .main-article p {
		margin-bottom: 1rem;
		color: white;
		font-size: 25px!important;
		font-family: 'Khula Regular', sans-serif;
		width:100%!important;
		
	}

	section p {
	  font-family: 'Khula Regular', sans-serif;
	  line-height: 1.6!important;
	  margin-bottom: 30px;
	  text-align: left;
	  font-size: 23px;
	  padding-bottom:0rem!important;
	}

	section .middletitle p {
	  font-family: 'Khula Regular', sans-serif;
	  line-height: 2;
	  margin-bottom: 30px;
	  text-align: left;
	  font-size: 22px;
	}

	.firstbluetitle{margin-top:18rem!important;padding-left:;}

	.highlighted {
		font-size: 1.7em!important;
		text-align:left!important;
		padding-left:9.5rem!important;
	}

	.centered{
		font-weight: 400;
		line-height: 1.1!important;
		text-align: center!important;
		font-size:60px!important;
		color:white!important;
	}

	.centeredwhite{
		font-weight: 400;
		line-height: 1.3!important;
		text-align: center!important;
		font-size:35px!important;
		color:white!important;
	}
	.centeredwhite2{
		font-family: 'Khula Regular', sans-serif!important;
		line-height: 1.3!important;
		text-align: center!important;
		font-size:35px!important;
		color:white!important;
	}
    
    .first{margin-top:350px!important;font-weight:900;padding-bottom:10rem!important;}

	.centered{text-align:center!important;width:100%!important;}

	.padding-top{padding-top:20rem!important;}
    .padding-bottom{padding-bottom:20rem!important;}
	.padding-top10{padding-top:10rem!important;}
    .padding-bottom10{padding-bottom:10rem!important;}

    body .summary {
    	width: 100%;
    	justify-content: space-between;
    	margin-top: 50px;
	    padding: 30px 13rem;
    	border-radius: 16px;
    	background: transparent!important;
		font-family: 'Gilroy-Bold ☞', sans-serif;
		padding-top:0rem;
		padding-left: 15rem!important;
    	padding-right: 15rem!important;
		display: flex;
    flex-direction: row!important;
	}

	body .summary2 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 1.6em;
		font-family: 'Khula Regular', sans-serif;
		padding-top:0rem;
	}

	body .summary3 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 30px!important;
		padding-top:0rem;
		color:white!important;
	}
	
	

	p.subIntro {
		margin-bottom: 20px;
		margin-top: 20px;
		color: white;
		font-size: 25px!important;
		font-family: 'Khula Regular', sans-serif;
		line-height: 1.6;
	}

	.gallery-title{
		text-align: center;
		font-size: 8rem !important;
		line-height: 7rem !important;
		margin-top: 16rem!important;
		margin-bottom: 2rem!important;
		color: #232323;
		padding-bottom: 0rem;
		font-family: 'Gilroy-Bold ☞', sans-serif;
		font-style: normal;
		font-weight: normal;
	}

	body article header .lower-header .title {
		margin: 20px 0;
		font-size: 6rem;
		font-weight: bold;
		opacity: 1;
		color: black;
		line-height: 5rem;
	}

	body article header .upper-header .mini-title {
		font-size: 2.825rem;
		font-weight: bold;
		letter-spacing: 0.4rem;
		text-transform: uppercase;
		opacity: 0.9;
		color: black;
		font-family: 'Gilroy-Bold ☞', sans-serif;

	}

	body article header .lower-header .title {
		margin: 20px 0;
		font-size: 3rem;
		font-weight: bold;
		opacity: 1;
		color: black;
		line-height: 5rem;
	}

	body .summary .summary-item .item-title {color: white;font-size: 25px!important;font-weight: 900;}
	body .item-text {font-size: 1.2rem;}
	.item-data {color: #6772e5!important;font-size:20px;font-family: 'Khula Regular', sans-serif;font-weight:700;}
	



	#titleprojectaltcentered {
		font-family: 'Gilroy-Bold ☞', sans-serif;
		font-style: normal;
		font-weight: normal;
		margin-top: 40rem;
		font-size: 68px;
		line-height: 1.3;
		color: #3c4496;
		text-shadow: 0 1px 2px rgba(23, 26, 79, 0.2);
		text-align: center;
		-webkit-animation-delay: 3s;
		animation-delay: 3s;
		width: 100%;
		position: absolute;
		text-decoration: none;
		z-index: 6!important;
	}

	.gallery-subtitle {
		text-align: center;
		font-size: 30px !important;
		line-height: 2rem !important;
		padding-top: -3rem!important;
		margin:0px auto 0px auto!important;
		width: 70%!important;
		padding-left: 0rem!important;
		letter-spacing: 0.05em;
		font-family: 'Gilroy-Bold ☞', sans-serif;
		font-style: normal;
		font-weight: normal;
		color:white;
	}


	.expertise22 {
		padding-top: 0rem;
		color: #d1d0ff;
		font-family: 'Gilroy-Bold ☞', sans-serif;
		font-size: 53px;
		letter-spacing: -.9px;
		line-height: 1.44;
		padding-left: 17rem !important;
		padding-right: 17rem !important;
		padding-bottom: 13rem !important;
		text-align: center !important;
		margin-top: 40px;
	}

	.marginleft{margin-left:7rem!important;}
	.paddingleft{padding-left:7rem!important;}
	body .mainarticle p .white{color:white!important;}





/* Header Styles */


	header {
	  position: absolute;
	  top: 0;
	  z-index: 1;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0px 0;
	  width: 80%;
	  animation: 1s fadein 0.5s forwards;
	  color: #fff;
	}

	header h2 {font-family: 'Khula Regular', sans-serif;font-size: 2rem;}
	header nav {display: flex;}
	header nav li {font-size: 1.5rem;}
	nav li:nth-child(2) {margin: 0 15px;}

	


/* Hero Section Styles */

	.hero {
		position: relative;
		justify-content: center;
		text-align: center;
		height: 100vh;
		color: #fff;
	}

	.hero .background-image {
		position: absolute;
		background-image: url(main.css);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-color: black;
	}

	.heroheading {
		font-family: 'Gilroy-Bold ☞', sans-serif!important;		
		line-height: 1.1em;
		font-weight: 900!important;
		letter-spacing: -0.04em;
		margin: auto;
		margin-bottom: 18px;
		font-size: 60px!important;
		position: relative;
		padding-top:10rem!important;
	}

	.hero a.btn {
		font-family: 'Khula Regular', sans-serif!important;
		padding: 20px 46px;
		font-size:20px!important;
		color:white;
	}

	.hero-content-area {
	  opacity: 1;
	  margin-top: 11%!important;    
	  animation: loadProfile 0.6s ease-in-out;
      animation-fill-mode: both;
	}

	.leftpadding{
	  padding-left: 27rem!important;	
	  padding-right: 27rem!important;
	}

	.rightpadding{
	  padding-right: 27rem!important;
	}

	


/* Main-article section Styles */

	body .main-article {
		background-color: black;		
		width: 100%;
		margin-top: 0px;
		padding-bottom: 0px;
		line-height: 1.75;
		padding-left: 15rem!important;
		padding-right: 15rem!important;
	}

	.main-article h5 {
		font-weight: 900;
		margin: 11px 0 9px;
		letter-spacing: .3px;
    	font-family: 'Gilroy-Bold ☞', sans-serif!important;
		font-size:40px;
		color:#353cf7;
		padding-top:3rem;
		padding-bottom:2rem;
	}

	.middletitle p{color:white!important;padding-bottom:3rem!important;}
	.fond{
		background-color: black;
		background-size:cover!important;
		width:100%!important;
		overflow:hidden!important;
		min-height:700px!important;
		}

	.last{padding-bottom:8rem!important;padding-top:20rem!important;}


/* About card Section Styles */

	.name{
		padding-top:0rem;
		padding-bottom:0rem;
		font-size: 40px!important;
		font-weight:900;
		color:#353cf7;
		margin: 10px 0;
	}

	.card-container p {
		font-size: 25px!important;
		line-height: 4rem!important;
		color:#232323;
	}
	.card-container h6 {
		font-family: 'Khula Regular', sans-serif!important;
		font-size: 20px!important;
		line-height: 1rem!important;
		padding-bottom:10px;
		padding-top:0rem;
		color:white;
		font-weight:700!important;
	}

	.card-container {
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	    background-size: 400% 400%;
	    animation: gradient 15s ease infinite;
		border-radius: 25px;
		box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
		color: #B3B8CD;
		padding-top: 25px;
		position: relative;
		width: 100%;
		max-width: 100%;
		text-align: center;
		margin-top:0px;
	}

	.card-container .pro {
		color: #231E39;
		background-color: #FEBB0B;
		border-radius: 3px;
		font-size: 20px;
		font-weight: bold;
		padding: 23px 27px;
		position: absolute;
		top: 30px;
		left: 30px;
	}

	.card-container .round {
		border: 12px solid #353cf7;
		border-radius: 50%;
		padding: 7px;
		margin-top:50px;
		width:200px;
	}

	button.primary {
		background-color: white;
		margin-top:1rem;
		border: 1px solid white;
		border-radius: 3px;
		font-weight: 500;
		padding: 20px 45px;
		font-size:20px!important;
		color: #353cf7!important;
		font-family: 'Khula Regular', sans-serif!important;
	}

	button.primary.ghost {
		background-color: white;
		color: #353cf7!important;
		margin-bottom:3rem;
		font-family: 'Khula Regular', sans-serif!important;
	}

	.skills {
		background-color: transparent;
		text-align: center;
		padding-left: 85px;
		padding-right: 85px;
		padding-bottom: 85px;
		margin-top: 0px;
	}

	.skills ul {
		font-family: 'Khula Regular', sans-serif!important;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.skills ul li {
		font-family: 'Khula Regular', sans-serif!important;
		border: 2px solid white;
		color:white!important;
		border-radius: 2px;
		display: inline-block;
		font-size: 15px!important;
		margin: 0 7px 7px 0;
		padding: 12px;
	}

/* Front page skills categories Section Styles */



 .sectionskills {
  background:black;
  width:100%!important;
  padding-left:15rem!important;
  padding-right:15rem!important;
  padding-top:5rem!important;
  padding-bottom:5rem!important;
  margin-top-2rem
  width: 100%;
  margin-inline: auto;
  color: white!important;
  margin-top: -1rem;
}

 .sectionskills a {
  display: inline-block;
  text-decoration: none;
  color: white;
}

.sectionskills .container div{
  margin-bottom: 0em!important;
}
 .sectionskills .container {
  margin-top: 0em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}
 .sectionskills .container .cardskills:nth-child(1) .box .icon .iconBox {
  background: #d3b19a;
}
 .sectionskills .container .cardskills:nth-child(2) .box .icon .iconBox {
  background: #70b3b1;
}
 .sectionskills .container .cardskills:nth-child(3) .box .icon .iconBox {
  background: #d05fa2;
}
 .sectionskills .container .cardskillsul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}
 .sectionskills .container .cardskills ul li {
  text-transform: uppercase;
  background: white;
  color: #353cf7;
  font-weight: 700;
  font-size: 15px;
  padding: 0.675rem 1.625rem;
  border-radius: 2rem;
  margin-top:0.5rem;
}
 .sectionskills .container .cardskills ul .branding {
  color: #704a31;
}
 .sectionskills .container .cardskills ul .packaging {
  color: #1e3938;
}
 .sectionskills .container .cardskills ul .marketing {
  color: #4d1637;
}
 .sectionskills .container .cardskills .content {
  padding: 0rem 0rem;
}
 .sectionskills .container .cardskills .content h3 {
  text-transform: capitalize;
  font-size: clamp(1.5rem, 1.3909rem + 0.4364vw, 1.8rem);
}
 .sectionskills .container .cardskills .content p {
  margin: 0.625rem 0 1.25rem;
  paddin-bottom:0rem!important;
  color: white;
}
 .sectionskills .container .card-inner {
  position: relative;
  width: inherit;
  height: 11.75rem;
  background: #353cf7;
  border-radius: 1.25rem;
  border-bottom-right-radius: 0;
  overflow: hidden;
}
 .sectionskills .container .card-inner .box {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 1.25rem;
  overflow: hidden;
}
 .sectionskills .container .card-inner .box .imgBox {
  position: absolute;
  inset: 0;
  min-height:80px!important;
}
 .sectionskills .container .card-inner .box .imgBox img {
  width: 100%;
  height: 80%;
  object-fit: cover;
}
 .sectionskills .container .card-inner .box .icon {
  position: absolute;
  bottom: -0.375rem;
  right: -0.375rem;
  width: 6rem;
  height: 6rem;
  background: black;
  border-top-left-radius: 50%;
}
 .sectionskills .container .card-inner .box .icon:hover .iconBox {
  transform: scale(1.1);
}
 .sectionskills .container .card-inner .box .icon::before {
  position: absolute;
  content: "";
  bottom: 0.375rem;
  left: -1.25rem;
  background: transparent;
  width: 1.25rem;
  height: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  box-shadow: 0.313rem 0.313rem 0 0.313rem black;
}
 .sectionskills .container .card-inner .box .icon::after {
  position: absolute;
  content: "";
  top: -1.25rem;
  right: 0.375rem;
  background: transparent;
  width: 1.25rem;
  height: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  box-shadow: 0.313rem 0.313rem 0 0.313rem black;
}
 .sectionskills .container .card-inner .box .icon .iconBox {
  position: absolute;
  inset: 0.625rem;
  background: #282828;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
 .sectionskills .container .card-inner .box .icon .iconBox span {
  color: #fff;
  font-size: 1.5rem;
}

/* Grid Styles */


    .grid {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	}
	.ds-grid {
		z-index: 2;
		grid-column-gap: 5rem;
		grid-row-gap: 5rem;
		flex: 0 auto;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr;
		grid-auto-columns: 1fr;
		align-self: auto;
		place-items: center stretch;
		display: grid;
		position: relative;
	}


	.w-node-_3fe515aa-2e07-1e22-9731-3690ead37cea-628bff5d {
		grid-area: span 1/span 1/span 1/span 1;
		place-self: center;
	}
	.ds-image-wrap.cc-85 {z-index: 2;width: 85%;position: relative;}
	.ds-image-wrap {border: 0 #000;width: 100%;}

	.col-md-6{display:inline-flex!important;width:49%!important;padding-right:3rem!important}

/* Section Google Map Styles */

	#mapframe{min-height:1000px!important;}

	.statistics p strong {
		font-size: 2.4rem!important;
		color: rgb(0, 0, 0);
		font-weight: 200;
		margin-right: 0.3rem;
	}

	.summary-item{
		width:30%!important; 
	}

	.category {
		padding-left: 24rem!important;
		padding-right: 24rem!important;
		background:#353cf7;
		margin-top:-250px;
		}

	.display-xs {
		color: white!important;
		letter-spacing: -.05rem;
		padding-bottom:2rem!important;
		margin-top: 0;
		margin-bottom: 0rem;
		font-size: 40px!important;
		font-weight: 700;
		line-height: 1.1;
	}

	.par-md {
		color: white!important;
		letter-spacing: -.02rem;
		margin-top: 0;
		margin-bottom: 2rem;
		font-size: 1.2rem;
		font-weight: 400;
		line-height: 1.6!important;
		text-align:left!important;
	}



/* Homepage Slider Styles */

	.cloneable{}


/* About pager Styles */

	.mainBigTitle{font-size:60px!important;color: #353cf7!important;font-weight:900!important;font-family: 'Gilroy-Bold ☞', sans-serif!important;}
	.headerabout{min-height: 550px!important;	}
	.portrait{width:100%!important;margin-top:8rem!important;border-radius:1rem!important;}



/* Nodes Styles */

	.w-node-_3fe515aa-2e07-1e22-9731-3690ead37cea-628bff5d {
		grid-area: span 1/span 1/span 1/span 1;
		place-self: start
	}

 	.w-node-_54bf919d-b0b4-1b11-6ff8-960830df5256-628bff5d,.w-node-_3fe515aa-2e07-1e22-9731-3690ead37cea-628bff5d {
        justify-self: start;
    }

	.w-node-_3fe515aa-2e07-1e22-9731-3690ead37cec-628bff5d,.w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c02-628bff5d {
    grid-area: span 1/span 1/span 1/span 1;
    justify-self: start;}


	.w-node-_3fe515aa-2e07-1e22-9731-3690ead37cec-628bff5d,.w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c02-628bff5d {
        justify-self: start;
    }

    .w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c0d-628bff5d,.w-node-_3fbd4c4b-761f-b345-59fb-2ad9dbb5f022-628bff5d {
    grid-area: span 1/span 1/span 1/span 1;
    place-self: start;
}


/* SlideFade anim Styles */


	@keyframes slidefade {
	  100% {
		opacity: 1;
		margin: 0;
	  }
	}


	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}


/* Destinations */

	.destinations .title, 
	.destinations p, 
	.destinations .grid {
	  max-width: 80%;
	}

	.destinations p {
	  width: 1800px;
	}

	.destinations .grid img {
	  padding: 20px;
	  background-clip: content-box;
	  background-size: cover;
	  background-position: center;
	  transition: 0.5s all ease;
	  filter: grayscale(50%)
	}

	.destinations .grid img:hover {
	  transform: scale(1.02);
	  transition: 0.5s all ease;
	  filter: none;
	}

	.destinations .grid img.small {
	  width: 27%;
	  height: 30vh;
	  flex-basis: 30%;
	}

	.destinations .grid img.large {
	  width: 67%;
	  height: 30vh;
	  flex-basis: 70%;
	}


/* Testimonials Section */

	.testimonials {
	  font-weight: 300;
	  line-height: 1.5;
	}

	.testimonials .title,
	.testimonials .author,
	.testimonials .quote {
	  max-width: 80%;
	  width: 1200px;
	}



/* Contact Section */

	.contact p {width: 80%;max-width: 1200px;}

	.contact form {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  flex-wrap: wrap;
	  width: 800px;
	  max-width: 80%;
	}

	.contact form .btn {padding: 18px 42px;width: 30%;}

	.contact form input {
	  padding: 15px;
	  margin: 15px 0 20px 0;
	  width: 50%;
	  font-size: 18px;
	  color: #555;
	}

.fa-square-linkedin {
  --fa: "\e7d0";
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-display: block;
  font-weight: 400;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: block;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: block;
  font-weight: 400;
  src: url("../webfonts/fa-regular-400.woff2") format("woff2");
}


.fa-regular,
.fa-brands,
.fa-classic,
.fa)::before {
  content: var(--fa);
  content: var(--fa)/"";
}

.fa-1x {
  font-size: 1em;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-6x {
  font-size: 6em;
}

.fa-7x {
  font-size: 7em;
}

.fa-8x {
  font-size: 8em;
}

.fa-9x {
  font-size: 9em;
}

.fa-10x {
  font-size: 10em;
}

.fa-2xs {
  font-size: calc(10 / 16 * 1em); /* converts a 10px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 10 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 10 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-xs {
  font-size: calc(12 / 16 * 1em); /* converts a 12px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 12 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 12 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-sm {
  font-size: calc(14 / 16 * 1em); /* converts a 14px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 14 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 14 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-lg {
  font-size: calc(20 / 16 * 1em); /* converts a 20px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 20 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 20 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-xl {
  font-size: calc(24 / 16 * 1em); /* converts a 24px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 24 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 24 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-2xl {
  font-size: calc(32 / 16 * 1em); /* converts a 32px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 32 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 32 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-width-auto {
  --fa-width: auto;
}

.fa-fw,
.fa-width-fixed {
  --fa-width: 1.25em;
}

.fa-ul {
  list-style-type: none;
  margin-inline-start: var(--fa-li-margin, 2.5em);
  padding-inline-start: 0;
}
.fa-ul > li {
  position: relative;
}

.fa-li {
  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit;
}

/* Heads Up: Bordered Icons will not be supported in the future!
  - This feature will be deprecated in the next major release of Font Awesome (v8)!
  - You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.
*/
/* Notes:
* --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)
* --@{v.$css-prefix}-border-padding =
  ** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)
  ** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)
*/
.fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.0625em);
  box-sizing: var(--fa-border-box-sizing, content-box);
  padding: var(--fa-border-padding, 0.1875em 0.25em);
}

.fa-pull-left,
.fa-pull-start {
  float: inline-start;
  margin-inline-end: var(--fa-pull-margin, 0.3em);
}

.fa-pull-right,
.fa-pull-end {
  float: inline-end;
  margin-inline-start: var(--fa-pull-margin, 0.3em);
}

.fa-beat {
  animation-name: fa-beat;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.fa-bounce {
  animation-name: fa-bounce;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
}

.fa-fade {
  animation-name: fa-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-beat-fade {
  animation-name: fa-beat-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-flip {
  animation-name: fa-flip;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.fa-shake {
  animation-name: fa-shake;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-spin {
  animation-name: fa-spin;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 2s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-spin-reverse {
  --fa-animation-direction: reverse;
}

.fa-pulse,
.fa-spin-pulse {
  animation-name: fa-spin;
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, steps(8));
}

@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin,
  .fa-spin-pulse {
    animation: none !important;
    transition: none !important;
  }
}
@keyframes fa-beat {
  0%, 90% {
    transform: scale(1);
  }
  45% {
    transform: scale(var(--fa-beat-scale, 1.25));
  }
}
@keyframes fa-bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
  }
  30% {
    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
  }
  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4);
  }
}
@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(var(--fa-beat-fade-scale, 1.125));
  }
}
@keyframes fa-flip {
  50% {
    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
  }
}
@keyframes fa-shake {
  0% {
    transform: rotate(-15deg);
  }
  4% {
    transform: rotate(15deg);
  }
  8%, 24% {
    transform: rotate(-18deg);
  }
  12%, 28% {
    transform: rotate(18deg);
  }
  16% {
    transform: rotate(-22deg);
  }
  20% {
    transform: rotate(22deg);
  }
  32% {
    transform: rotate(-12deg);
  }
  36% {
    transform: rotate(12deg);
  }
  40%, 100% {
    transform: rotate(0deg);
  }
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fa-rotate-90 {
  transform: rotate(90deg);
}

.fa-rotate-180 {
  transform: rotate(180deg);
}

.fa-rotate-270 {
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  transform: scale(1, -1);
}

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
  transform: scale(-1, -1);
}

.fa-rotate-by {
  transform: rotate(var(--fa-rotate-angle, 0));
}

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: var(--fa-stack-z-index, auto);
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: var(--fa-inverse, #fff);
}


/* Video component Section */



audio,canvas,progress,video {
    vertical-align: baseline;
    display: inline-block
}

audio:not([controls]) {
    height: 0;
    display: none
}

[hidden],template {
    display: none
}

a {
    background-color: #0000
}

a:active,a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,strong {
    font-weight: 700
}

dfn {
    font-style: italic
}



mark {
    color: #000;
    background: #ff0
}

small {
    font-size: 80%
}

sub,sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,kbd,pre,samp {
    font-family: monospace;
    font-size: 1em
}

button,input,optgroup,select,textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,select {
    text-transform: none
}

button,html input[type=button],input[type=reset] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: none
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,th {
    padding: 0
}

[class^=w-icon-],[class*=\ w-icon-] {
    speak: none;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    font-family: webflow-icons!important
}


.cardd {
  position: absolute;
  height: 350px;
  width: 100%;
  max-width: 850px;
  margin: auto;
  background-color: #ffffff;
  border-radius: 25px;
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.5);
}

.card .inner_part {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 30px;
  height: 350px;
  position: absolute;
}

#slideImg:checked ~ .inner_part {
  padding: 0;
  transition: .1s ease-in;
}

.inner_part .img {
  height: 260px;
  width: 260px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 20px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.2);
}

#slideImg:checked ~ .inner_part .img {
 height: 350px;
 width: 850px;
 z-index: 99;
 transition: .3s .2s ease-in;
}

.img img {
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  transition: .6s;
}

#slide_1:checked ~ .inner_part .img_1,
#slide_2:checked ~ .inner_part .img_2,
#slide_3:checked ~ .inner_part .img_3 {
  opacity: 1;
  transition-delay: .2s;
}

.content {
  padding: 0 20px 0 35px;
  width: 90%;
  margin-left: 5%;
  opacity: 0;
  transition: .6s; 
}


section .content {
  opacity: 1!important;
}



#slideImg:checked ~ .inner_part .content {
  display: none;
}

#slide_1:checked ~ .inner_part .content_1,
#slide_2:checked ~ .inner_part .content_2,
#slide_3:checked ~ .inner_part .content_3 {
  opacity: 1;
  margin-left: 0;
  z-index: 100;
  transition-delay: .3s;
}

.content .title {
  font-size: 30px;
  font-weight: 700;
  color: #0d0925;
  margin: 0 0 20px 0;
}

.content .text {
  font-size: 19px;
  color: #4e4a67;
  margin: 0 auto 30px auto;
  line-height: 1.5em;
  text-align: justify;
}

.content button {
  padding: 15px 20px;
  border: none;
  font-size: 16px;
  color: #fff0e6;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  background: #000000;
  float: right;
}

.content button:hover {
  background: #cecece;
  color: #000000;
}

.slider {
  position: absolute;
  bottom: 25px;
  left: 55%;
  transform: translateX(-50%);
  z-index: 1;
}

#slideImg:checked ~ .slider {
  display: none;
}

.slider .slide {
  position: relative;
  height: 10px;
  width: 50px;
  background: #d9d9d9;
  border-radius: 5px;
  display: inline-flex;
  margin: 0 3px;
  cursor: pointer;
}


.slider .slide:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: -100%;
  background: #000000;;
  border-radius: 10px;
  transform: scaleX(0);
  transition: transform .6s;
  transform-origin: left;
}

#slide_1:checked ~ .slider .slide_1:before,
#slide_2:checked ~ .slider .slide_2:before,
#slide_3:checked ~ .slider .slide_3:before {
  transform: scaleX(1);
  width: 100%;
}

input {
  display: none;
}

.cloneable {
  padding: var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  font-size: 1.1vw;
}

.overlay {
  z-index: 2;
  background-image: linear-gradient(90deg, black 5%, #0000);
  justify-content: flex-start;
  align-items: center;
  width: 37.5em;
  height: 100%;
  padding-left: 11em;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
	
}

.overlay-inner {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 10%;
  display: flex;
	margin-top: -14.5rem;
}

.overlay-count-row {
  grid-column-gap: .2em;
  grid-row-gap: .2em;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  font-family: PP Neue Corp, Impact, sans-serif;
  font-size: 7.625em;
  font-weight: 700;
  display: flex;
}

.count-column {
  height: 1.7em;
  overflow: hidden;
}

.count-heading {
  width: 2ch;
  font-size: 1.5em;
  line-height: 1;
  margin: 0px;
  color:white;
  font-family: 'Khula Regular', sans-serif!important;
}

.count-row-divider {
  background-color: var(--color-light);
  width: 2px;
  height: .75em;
  transform: rotate(15deg);
}

.overlay-nav-row {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  display: flex;
}

.button {
  background-color: #0000;
  color: #353cf7;
  border: 0.5rem solid #353cf7;
  border-radius: .4em;
  justify-content: center;
  align-items: center;
  width: 5em;
  height: 5em;
  padding: 0;
  display: flex;
  position: relative;
}

.button-arrow {
  flex: none;
  width: 2em;
  height: 1.5em;
}

.button-arrow.next {
  transform: rotate(180deg);
}

.button-overlay {
  z-index: 2;
  position: absolute;
  inset: -1px;
}

.overlay-corner {
  border-top: 1px solid var(--color-light);
  border-left: 1px solid var(--color-light);
  border-top-left-radius: .4em;
  width: 1em;
  height: 1em;
}

.overlay-corner.top-right {
  position: absolute;
  inset: 0% 0% auto auto;
  transform: rotate(90deg);
}

.overlay-corner.bottom-left {
  position: absolute;
  inset: auto auto 0% 0%;
  transform: rotate(-90deg);
}

.overlay-corner.bottom-right {
  position: absolute;
  inset: auto 0% 0% auto;
  transform: rotate(180deg);
}

.button, .button-overlay{ transition: transform 0.475s var(--cubic-default), opacity 0.475s var(--cubic-default)}

.button:hover .button-overlay{ transform: scale(1.4); }
.overlay-nav-row:hover:has(.button:hover) .button{ opacity: 0.4; }
.button:hover{ transform: scale(0.85); opacity: 1 !important; }

.main {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.slider-wrap {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.slider-list {
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
  position: relative;
  padding-top:0rem;;
}

.slider-slide {
  flex: none;
  width: 42.5em;
  height: 28em;
  padding-left: 1.25em;
  padding-right: 1.25em;
  transition: opacity .4s;
  position: relative;
}

[data-slider="slide"]{ opacity: 0.2; }
[data-slider="slide"].active { opacity: 1; } 
[data-slider="slide"].active .slide-caption{ transition-delay:0.3s;} 

.slide-inner {
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

img{
  width:100%;
  height:100;
  object-fit: cover;
}

.slide-caption {
  z-index: 2;
  grid-column-gap: .4em;
  grid-row-gap: .4em;
  background-color: #353cf7;
  color: var(--color-dark);
  white-space: nowrap;
  border-radius: .25em;
  justify-content: flex-start;
  align-items: center;
  padding: .4em .75em .4em .5em;
  display: flex;
  position: absolute;
  top: 1.25em;
  left: 1.25em;
  overflow: hidden;
}

.caption-dot {
  background-color: var(--color-dark);
  border-radius: 10em;
  flex: none;
  width: .5em;
  height: .5em;
}

.caption {
  color:white;
  font-size: .75em;
  font-weight:900;
  font-family: arial;
  margin: 0px;
  padding-bottom:0px!important;
}

.slide-caption{ transition: transform 0.525s var(--cubic-default), opacity 0.525s var(--cubic-default); transition-delay:0s; }

.cloneable {
  padding: var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  margin-top: -240px;
  margin-bottom: 2s80px;
background-color: black;}

/* HORIZONTAL SCROLL*/

.container {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    min-height: 10vh;
    background-color: transparent;
    max-width: 100%;
    width: 100%;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 0rem!important;
    padding-right: 0rem!important;
}
.container::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1;
}
.hs__wrapper .hs__arrows {
    text-align: right;
	display:inline-block!important;
	margin-top:0rem;
	padding-left:15rem!important;
}

.hs__arrows2 {margin-top:2rem!important;}

.hs__wrapper .hs__arrows2 {
    text-align: right;
	display:inline-block!important;
	padding-top:4rem!important;
	
}
.arrow{
	background:#305db7;
	padding:20px;
	border-radius:5px;
}
.arrow-next{margin-left:5px;}
.arrow-prev{color:black!important;}

.hs__wrapper{
    padding-top;2rem;
}

.hs__wrapper2{
    padding-top;2rem;
}


.hs__arrows .arrow::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    content: "";
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
        background-size: auto;
    background-size: contain;
    -webkit-filter: brightness(5);
    filter: brightness(5);
    width: 18px;
    height: 12px;
    cursor: pointer;
}

.hs__arrows2 .arrow::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    content: "";
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
        background-size: auto;
    background-size: contain;
    -webkit-filter: brightness(5);
    filter: brightness(5);
    width: 18px;
    height: 12px;
    cursor: pointer;
}

ul, ol {
    padding: 0;
    list-style-position: inside;
    letter-spacing: .2px;
}

.hs {
    display: flex;
    overflow-x: hidden;
    justify-content: space-between;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
	padding-top:3rem;
	padding-bottom:1rem;
}


.hs2 {
    display: flex;
    overflow-x: scroll;
    justify-content: space-between;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -60px;
	padding-top:3rem;
	padding-bottom:1rem;
}


.hs__arrows .arrow.arrow-next::before {

    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);

}

.hs__arrows2 .arrow.arrow-next::before {

    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);

}



.hs__item:first-child {
    margin-left: calc(10px * 2);
}
.hs__item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: calc(120% / 4 - (10px * 2) - (20px / 4));
    margin: 20px;
    margin-left: 620px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hs__item2 {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: calc(100% / 4 - (10px * 1) - (10px / 2));
    margin: 20px;
        margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	box-shadow: 0 0 35px rgba(24, 22, 16, 0.125) !important;
}

.hs__item2:first-child {
    margin-left: calc(10px * 2);
}

.hs__item2 {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: calc(120% / 4 - (10px * 2) - (20px / 4));
    margin: 20px;
    margin-left: 120px!important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	box-shadow: 0 0 35px rgba(24, 22, 16, 0.125) !important;
}


.hs__item__image__wrapper {
    position: relative;
    width: 180%!important;
    height: 0;
    padding-bottom: 100%;
    border-radius: 10px !important;
    overflow: hidden !important;
	background:#6f78e7!important;
}

.hs__item__image__wrapper img:hover{opacity:0.7!important;transition-duration:0.5s;transition-delay:0.5s;}

.hs__item__image__wrapper2 {
    position: relative;
    width: 127%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 5px !important;
    overflow: hidden !important;
}

.hs__item__image__wrapper a {padding-left: 0px;}

.hs__item__image {
    position: relative;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
img {border: 0;}

.hs__item__description {
    z-index: 1;
    align-self: flex-start;
    margin: 10px -40px;
    position: absolute;
    bottom: 2rem !important;
    left: 2rem;
    font-size: 3rem;
}

.hs__item__title {
    font-family: 'Gilroy-Bold ☞', sans-serif;
  font-style: normal;
  font-weight: normal;
    text-align: left;
    font-size: 4rem !important;
    text-transform: uppercase !important;
}

.hs__item__subtitle {
    color: black;
    display: block;
    padding-left: 2rem !important;
    margin-left: 2rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
	font-family: 'Gilroy-Bold ☞', sans-serif;
  font-style: normal;
  font-weight: normal;
    text-align: left;
    font-size: 2.2rem !important;
    text-transform: uppercase !important;
}

.hs__arrows .arrow.arrow-prev::before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-right: 10px;

}
.hs__arrows2 .arrow.arrow-prev::before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-right: 10px;

}
.arrow.disabled{background:black!important;}
.hs__arrows .arrow.disabled::before {
    -webkit-filter: brightness(2);
    filter: brightness(2);
}
.hs__arrows .arrow::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    content: "";
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
        background-size: auto;
    background-size: contain;
    -webkit-filter: brightness(5);
    filter: brightness(5);
    width: 18px;
    height: 12px;
    cursor: pointer;

}



/******* Common Element CSS End *********/

/* -------- title style ------- */
.line-title {
  position: relative;
  width: 400px;
}
.line-title::before,
.line-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  border-radius: 2px;
}
.line-title::before {
  width: 100%;
  background: #f2f2f2;
}
.line-title::after {
  width: 32px;
  background: #e73700;
}



/***** responsive css Start ******/

:root {
  --scroller-size: 500vw;
}

.scroller-container {
  overflow: hidden;
  margin-top:100px;
  margin-bottom:300px;

}
.scroller {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: var(--scroller-size);
  -webkit-animation: icon-scroller 60s linear 0s normal infinite;
          animation: icon-scroller 60s linear 0s normal infinite;
  will-change: transform;
}
.scroller-img {
  max-width: 1050px;
  max-height: 110px;
	padding:1rem;
}

@-webkit-keyframes icon-scroller {
  100% {
    transform: translateX(calc(var(--scroller-size)*-0.5));
  }
}

@keyframes icon-scroller {
  100% {
    transform: translateX(calc(var(--scroller-size)*-0.5));
  }
}

@media (max-width: 1200px) {
  :root {
    --scroller-size: 800vw;
  }
}
@media (max-width: 800px) {
  :root {
    --scroller-size: 1000vw;
  }
  .scroller-img {
    max-width: 130px;
    max-height: 30px;
  }
}
@media (max-width: 500px) {
  :root {
    --scroller-size: 1400vw;
  }
}





/* HEADER */

.cd-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100000000000;
	padding-left:12rem;
	padding-right:12rem;
}

.header-wrapper {
    position: relative;
    width: calc(100% - 100px);
    margin-left: 50px;
}

.menu-icon {
    height: 30px;
    width: 30px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    display: block;
}



body article {
    width: 100%;
	overflow:hidden!important;
}

body article header .upper-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

body article header .lower-header {
    padding-left: 10rem!important;
    padding-right: 10rem!important;
}

body article header .lower-headertwo {
    padding-top: 50px;
    margin-left: 0rem;
	    font-family: 'Gilroy-Bold ☞', sans-serif;
}

body article header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 50px;
    padding-right: 50px;
    border-radius: 1rem!important;
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	position:relative;
	z-index:3;
	margin: 80px auto 0px auto!important;
    width: 100%!important;
	min-height:500px!important;
}


/* LOGO */

.logo-wrap {
    position: absolute;
    display: block;
    left: 0;
    top: 25px;
    cursor: pointer;
    width: 90%;
}

.logo-wrap a span {
    color: #7d9dd6;
}

.logo-wrap a {
    cursor: pointer;
    font-weight: normal;
    font-size: 30px!important;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    transition: all 0.3s ease-out;
	text-decoration:none!important;
	font-family: 'Gilroy-Bold ☞', sans-serif!important;
	font-weight:900!important;
}


/* NAVIGATION */


.nav-but-wrap{ 
	position: relative;
	display: inline-block;
	float: right;
	padding-left: 15px;
	padding-top: 15px;
	margin-top: 13px;
	margin-bottom: 13px;
	transition : all 0.3s ease-out;
}
.menu-icon {
	height: 30px;
	width: 30px;
	position: relative;
	z-index: 2;
	cursor: pointer;
	display: block;
}
.menu-icon__line {
	height: 2px;
	width: 30px;
	display: block;
	background-color: #232323;
	margin-bottom: 7px;
	cursor: pointer;
	-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
	transition: background-color .5s ease, -webkit-transform .2s ease;
	transition: transform .2s ease, background-color .5s ease;
	transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left {
	width: 16.5px;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.menu-icon__line-right {
	width: 16.5px;
	float: right;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}
.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right {
	width: 30px;
}
.nav {
	position: fixed;
	z-index: 98;
}
.nav:before, .nav:after {
	content: "";
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #f1eeff;
	border-bottom-left-radius: 200%;
	z-index: -1;
	-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	-webkit-transform: translateX(100%) translateY(-100%);
          transform: translateX(100%) translateY(-100%);
}
.nav:after {
	background: #3c4496;
	-webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav:before {
	-webkit-transition-delay: .2s;
          transition-delay: .2s;
}
.nav__content {
	position: fixed;
	visibility: hidden;
	top: 50%;
	-webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
	width: 100%;
	text-align: center;
}
.nav__list {
	position: relative;
	padding: 0;
	margin: 0;
	z-index: 2;
}
.nav__list-item {
	position: relative;
	display: block;
	-webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
	opacity: 0;
	text-align: center;
	color: #232323;
	overflow: hidden; 
	font-family: 'Gilroy-Bold ☞', sans-serif;
    font-style: normal;
    font-weight: normal;
	font-size: 8vh;
	line-height: 1.15;
	letter-spacing: 3px;
	-webkit-transform: translate(100px, 0%);
    transform: translate(100px, 0%);
	-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: opacity .2s ease, transform .3s ease;
	transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
	margin-top: 0;
	margin-bottom: 0;
}
.nav__list-item a{ 
	position: relative;
	text-decoration: none;
	color: #fff;
	overflow: hidden; 
	cursor: pointer;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: 900;
	z-index: 2;
	display: inline-block;
	text-transform: uppercase;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
}
.nav__list-item a:after{ 
	position: absolute;
	content: '';
	top: 50%;
	margin-top: -2px;
	left: 50%;
	width: 0;
	height: 0;
	opacity: 0;
	background-color: #8167a9;
	z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
}
.nav__list-item a:hover:after{ 
	height: 4px;
	opacity: 1;
	left: 0;
	width: 100%;
}
.nav__list-item a:hover{
	color: #232323;
}
.nav__list-item.active-nav a{
	color: black;
}
.nav__list-item.active-nav a:after{ 
	height: 4px;
	opacity: 1;
	left: 0;
	width: 100%;
}
body.nav-active .nav__content {
	visibility: visible;
}
body.nav-active .menu-icon__line {
	background-color: #232323;
	-webkit-transform: translate(0px, 0px) rotate(-45deg);
          transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
	width: 15px;
	-webkit-transform: translate(2px, 4px) rotate(45deg);
          transform: translate(2px, 4px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
	width: 15px;
	float: right;
	-webkit-transform: translate(-3px, -3.5px) rotate(45deg);
          transform: translate(-3px, -3.5px) rotate(45deg);
}
body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
	width: 15px;
}
body.nav-active .nav {
	visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
	-webkit-transform: translateX(0%) translateY(0%);
          transform: translateX(0%) translateY(0%);
	border-radius: 0;
}
body.nav-active .nav:after {
	-webkit-transition-delay: .1s;
          transition-delay: .1s;
	height:220vh;
}
body.nav-active .nav:before {
	-webkit-transition-delay: 0s;
          transition-delay: 0s;
}
body.nav-active .nav__list-item {
	opacity: 1;
	-webkit-transform: translateX(0%);
    transform: translateX(0%);
	-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
	transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
	transition: opacity .3s ease, transform .3s ease, color .3s ease;
	transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
	-webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(1) {
	-webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(2) {
	-webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
body.nav-active .nav__list-item:nth-child(3) {
	-webkit-transition-delay: 1s;
          transition-delay: 1s;
}
body.nav-active .nav__list-item:nth-child(4) {
	-webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
body.nav-active .nav__list-item:nth-child(5) {
	-webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
body.nav-active .nav__list-item:nth-child(6) {
	-webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
body.nav-active .nav__list-item:nth-child(7) {
	-webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
body.nav-active .nav__list-item:nth-child(8) {
	-webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
body.nav-active .nav__list-item:nth-child(9) {
	-webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
body.nav-active .nav__list-item:nth-child(10) {
	-webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}

.switch-wrap {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 10;
    transform: translateY(-50%);
	width: 100%;
	-webkit-transition: all 500ms linear;
	transition: all 500ms linear; 
	margin: 0 auto;
	text-align: center;
}
.switch-wrap h1 {
	font-weight: 900;
	font-size: 46px;
	line-height: 1;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 40px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
@media screen and (max-width: 580px){
  .switch-wrap h1 {
    font-size: 32px;
  }
}

body .summary3 {
    padding-top: 2rem;
	font-weight:900!important;
	font-family: 'Khula Regular', sans-serif!important;
	line-height: 1.6;
}
.switch-wrap p {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1;
	color: #8167a9;
	text-align: center;
	margin-top: 15px;
}
.switch-wrap p span {
	position: relative;
}
.switch-wrap p span:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 2px;
	background-color: #fff;
	left: 0;
	bottom: -4px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.switch-wrap p span:nth-child(2):before {
	opacity: 0;
}
#switch,
#circle {
	cursor: pointer;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
#switch {
	width: 60px;
	height: 8px;
	margin: 0 auto;
	text-align: center;
	border: 2px solid #000;
	border-radius: 27px;
	background: #8167a9;
	position: relative;
	display: inline-block;
}
#circle {
	position: absolute;
	top: -11px;
	left: -13px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	background: #fff;
}
.switched {
	border-color: #8167a9 !important;
	background: #000 !important;
}
.switched #circle {
	left: 43px;
	background: #000;
}

.secondaryNavContainer {
	width:100%;
	margin:0px auto 0px auto;
	padding-left:18rem!important;
	padding-right:18rem!important;
	padding-top:12rem!important;
	padding-bottom:12rem!important;
}

.secondaryNavContainer a{
    display:inline-block!important;
	 text-align: center;
    font-size: 30px !important;
    line-height: 2rem !important;
    letter-spacing: 0.05em;
    font-family: 'Gilroy-Bold ☞', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: white;
	padding: 1.7rem;
}

.secondaryNav a{
    display:inline-block!important;
    
}


/* BODY INTRO PAGE */

.intro-wrapper {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 0;
    transform-origin: left center;
    overflow: hidden!important;
    opacity: 1;
    height: 95vh;
	background: #6610f2;
}


/* LAYOUT */


.containerMenuAbout {
    border-radius: 25px;
    padding-left: 15rem;
    padding-right: 15rem;
    background-color: transparent;
    color: #ffffff;
    height: 520px;
}

.row {
    
    margin: 0px auto 0px auto;
    position: relative;
    z-index: 3;
    width: 100%;
}
.justify-content-center {

	width:100%!important;
}


.vimeo img{width:120%!important;}


/* VIDEO */

.container div:last-of-type {
    margin-bottom: 0;
}
.container div {
    margin-bottom: 4rem;
    display: block;
}
.video-section {
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-radius: 0px;
}

.container div:last-of-type {
    margin-bottom: 0;
}
.container div {
    margin-bottom: 4rem;
    display: block;
}
.video-section {
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.45);
}

.container div:last-of-type {
    margin-bottom: 0;
}
.container div {
    margin-bottom: 4rem;
    display: block;
}
.video-section {
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.45);
}

figure.vimeo a:before, figure.youtube a:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -3px;
    margin-top: -5px;
    display: block;
    cursor: url(http://www.ivang-design.com/svg-load/play.png) 30 30,pointer;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}
figure.vimeo a:before, figure.youtube a:before {
    border-left: 8px solid #212121;
}

figure.vimeo a:after, figure.youtube a:after {
    content: "";
    width: 60px;
    height: 60px;
    background: purple;
    z-index: 9;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.15);
    cursor: url(http://www.ivang-design.com/svg-load/play.png) 30 30,pointer;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%;
	padding:0rem!important;
	margin:0rem!important;
}

.video-wrapper video{
	top: 0;
    left: 0;
    width: 100%!important;
    height: 100%;
	padding:13rem!important;
	margin:0rem!important;
	}

.video-wrapper, figure.vimeo, figure.youtube {
    margin: 0;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

/* TYPOGRAPHY */


.checkbox-alizarin:checked ~ .box.alizarin p {
    padding-right: 3rem;
    font-size: 2.2rem!important;
    line-height: 2rem;
    font-family: 'Gilroy-Bold ☞', sans-serif;
}

.paragraphBoxOne {
    position: absolute;
    padding-top: 8rem;
    font-size: 0.8rem;
    line-height: 1rem;
    color: #6772e5!important;
}

.checkbox-alizarin:checked ~ .box.alizarin .ptwo {
    padding-right: 3rem;
    font-size: 1.8rem!important;
    line-height: 2.3rem;
    font-family: 'Gilroy-Bold ☞', sans-serif;
}
.checkbox-alizarin:checked ~ .box.alizarin p {
    padding-right: 3rem;
    font-size: 2.2rem!important;
    line-height: 2rem;
    font-family: 'Gilroy-Bold ☞', sans-serif;
}
.paragraphBoxOne {
    position: absolute;
    padding-top: 8rem;
    font-size: 0.8rem;
    line-height: 1rem;
    color: #6772e5!important;
}

.checkbox-all:checked ~ .box.alizarin, .checkbox-all:checked ~ .box.wisteria, .checkbox-all:checked ~ .box.emerland, .checkbox-all:checked ~ .box.belizehole, .checkbox-all:checked ~ .box.sunflower, .checkbox-alizarin:checked ~ .box.alizarin, .checkbox-wisteria:checked ~ .box.wisteria, .checkbox-emerland:checked ~ .box.emerland, .checkbox-belizehole:checked ~ .box.belizehole, .checkbox-sunflower:checked ~ .box.sunflower {
    opacity: 1;
    min-height: 340px;
    min-width: calc(33% - 28px);
    padding: 0 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px!important;
    visibility: visible;
    transform: scale(1);
    border-width: 3px;
}
.checkbox-all:checked ~ .box.alizarin, .checkbox-alizarin:checked ~ .box.alizarin {
    border: 0px;
	text-align:center;
    min-height: 680px!important;
    min-width: calc(32% - 25px)!important;
    padding: 0 10px!important;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    visibility: visible;
    transform: scale(1);
    border-width: 1px;
    padding: 3rem!important;
}
.box.alizarin, .box.wisteria, .box.emerland, .box.belizehole, .box.sunflower {
    opacity: 0;
    transform: scale(0);
    padding: 0;
    margin: 0;
    visibility: hidden;
    border-width: 0;
}
.box.alizarin {
    border: 3px solid #e74c3c;
}
.box.alizarin, .box.wisteria, .box.emerland, .box.belizehole, .box.sunflower {
    opacity: 0;
    transform: scale(0);
    padding: 0;
    margin: 0;
    visibility: hidden;
    border-radius: 0rem;
}
.box.alizarin {
    border: none;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,.125);
}
.box {
    border-radius: 4px;
    -webkit-transition: all 0.2s linear;
    transition: all 0.3s linear;
}
.box {
    border-radius: 0.5rem;
    -webkit-transition: all 0.2s linear;
    transition: all 0.3s linear;
}
.col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}



.sectionapp5 {
    position: relative;
    text-align: center;
    width: 100%;
    margin-top: 0px;
    background: #6772e5;
}

.text {
    font-family: 'Gilroy-Bold ☞', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-weight: 700;
    width: 60%;
    text-align: center;
    font-size: 63px;
    z-index: 3;
    color: white;
    padding-top: 35rem!important;
}




/* IMAGES */

.main-article img {
	border-radius:1rem!important;
}

.VideoImageThumb {
    width: 100%!important;
    background-size: cover;
	padding-left:18rem!important;
	padding-right:18rem!important;
	padding-top:12rem!important;

}

.bubble-wrap {
    overflow: hidden;
    height: 900px;
    position: relative!important;
    padding-left: 0rem!important;
    padding-right: 0rem!important;
    padding-top: 8rem;
	scale:1.6;
}


.zoom-element {
  width: calc(100% - 10vw);
  height: calc(100% - 10vw);
  display: flex;
  font-size: 100px;
  position: relative!important;
  top: 5vw;
  left: 5vw;
  align-items: center;
  justify-content: center;
  transform: scale(0.1);
  opacity: 0;
  border: 5px solid white;
	color:#232323!important;
}







.bubbles {
  position: relative;
  background: salmon;
}

.bubble {
  position: absolute;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  background-image: url('../img/logosSoftwares.png');
  background-size: 1076px 1076px;
}

.logo1 { background-position:   0      0; }
.logo2 { background-position:  -154px  0; }
.logo3 { background-position:  -308px  0; }
.logo4 { background-position:  -462px  0; }
.logo5 { background-position:  -616px  0; }
.logo6 { background-position:  -770px  0; }
.logo7 { background-position:  -924px  0; }
.logo8 { background-position:   0     -154px; }
.logo9 { background-position:  -154px -154px; }
.logo10 { background-position: -308px -154px; }
.logo11 { background-position: -462px -154px; }
.logo12 { background-position: -616px -154px; }
.logo13 { background-position: -770px -154px; }
.logo14 { background-position: -924px -154px; }
.logo15 { background-position:  0     -308px; }
.logo16 { background-position: -154px -308px; }
.logo17 { background-position: -308px -308px; }
.logo18 { background-position: -462px -308px; }
.logo19 { background-position: -616px -308px; }
.logo20 { background-position: -770px -308px; }
.logo21 { background-position: -924px -308px; }
.logo22 { background-position:  0     -462px; }
.logo23 { background-position: -154px -462px; }
.logo24 { background-position: -308px -462px; }
.logo25 { background-position: -462px -462px; }
.logo26 { background-position: -616px -462px; }
.logo27 { background-position: -770px -462px; }
.logo28 { background-position: -924px -462px; }
.logo29 { background-position:  0     -616px; }
.logo30 { background-position: -154px -616px; }
.logo31 { background-position: -308px -616px; }
.logo32 { background-position: -462px -616px; }
.logo33 { background-position: -616px -616px; }









/*____________________________ SCROLL MAGIC  ______________________________*/


#reveal1 {
         opacity: 1;
         -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
         -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
         transform: scale(0.9);
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -ms-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
		 margin-top: 9rem;
		 overflow:hidden;
         }
#reveal1.visible {
         opacity: 0;
         -webkit-transform: none;
         -moz-transform: none;
         -ms-transform: none;
         -o-transform: none;
         transform: none;
	     box-shadow: 0 30px 30px -25px rgba(65, 51, 183, 0.25);
     }
      


#reveal11 {
         opacity: 0;
         -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
         -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
         transform: scale(0.9);
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -ms-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
	margin-top: 9rem;
	overflow:hidden;
         }
#reveal11.visible {
         opacity: 1;
         -webkit-transform: none;
         -moz-transform: none;
         -ms-transform: none;
         -o-transform: none;
         transform: none;
     }


#reveal111 {
         opacity: 0;
         -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
         -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
         transform: scale(0.9);
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -ms-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
	overflow:hidden;
         }
#reveal111.visible {
         opacity: 1;
         -webkit-transform: none;
         -moz-transform: none;
         -ms-transform: none;
         -o-transform: none;
         transform: none;
     }



#reveal1111 {
         opacity: 0;
         -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
         -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
         transform: scale(0.9);
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -ms-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
	overflow:hidden;
	justify-self: end!important;
         }
#reveal1111.visible {
         opacity: 1;
         -webkit-transform: none;
         -moz-transform: none;
         -ms-transform: none;
         -o-transform: none;
         transform: none;
	
     }


      

#reveal2 {
        opacity: 0;
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
	margin-top: 9rem;
    }

#reveal2.visible {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }


#reveal22 {
        opacity: 0;
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
	    margin-top: 3rem;
	    overflow:hidden;
    }

#reveal22.visible {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

#reveal3 {
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
	margin-top: 9rem;
	overflow:hidden;
        }

#reveal3.visible {
	        box-shadow: 0 30px 30px -25px rgba(65, 51, 183, 0.25);
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }

#reveal33 {
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
		    margin-top: 0rem;
	        overflow:visible;
        }

#reveal33.visible {
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }

#reveal4 {
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
			overflow-x:hidden!important;
			margin-top: 2rem;
			overflow:hidden;
        }

#reveal4.visible {
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }


#reveal44 {
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
			overflow-x:hidden!important;
	margin-top: 9rem;
	overflow:hidden;
        }

#reveal44.visible {
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }



#reveal5 {
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
	margin-top: 9rem;
	overflow:hidden;
            }
            #reveal5.visible {
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
				
            }

#reveal6 {
         opacity: 0;
         -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
         -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
         transform: scale(0.9);
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -ms-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
	margin-top: 9rem;
	overflow:hidden;
         }
         #reveal6.visible {
         opacity: 1;
         -webkit-transform: none;
         -moz-transform: none;
         -ms-transform: none;
         -o-transform: none;
         transform: none;
			 
         }

#reveal8 {
         opacity: 0;
         -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
         -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
         transform: scale(0.9);
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -ms-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
	overflow:hidden;
         }
         #reveal8.visible {
         opacity: 1;
         -webkit-transform: none;
         -moz-transform: none;
         -ms-transform: none;
         -o-transform: none;
         transform: none;
         }

#reveal11 {
         opacity: 0;
         -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
         -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
         transform: scale(0.9);
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -ms-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
	overflow:hidden;
         }
         #reveal11.visible {
         opacity: 1;
         -webkit-transform: none;
         -moz-transform: none;
         -ms-transform: none;
         -o-transform: none;
         transform: none;
         }




    *, 
    *::before,
    *::after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    }

    * {
        padding: 0;
        margin: 0;
        list-style: none;
        line-height: 1em;
    }

  
    .palete {
        border-radius: 5px;
        background-color: transparent;
        -webkit-box-shadow: 0px 3px 0px 0px rgba(226, 228, 231, 0.75);
        -moz-box-shadow:    0px 3px 0px 0px rgba(226, 228, 231, 0.75);
        box-shadow:         0px 3px 0px 0px rgba(226, 228, 231, 0.75);
    }
    .palete-color {position: relative;}
    .palete-color,
    .palete-color__square {height: 50px;}
    .secondaryPalette .palete-color__square {width: 100%;float: left;}
    .palete-color__square {
        width: 50%;
        width: 50%;
        float: left;
    }

	.palete-color__square2 {
        width: 30%!important;
        float: left;
    }
   

    .palete-color__lighten {
        -webkit-border-top-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        border-top-left-radius: 5px;
    }
    
    .palete-color__darken {
        float: right;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        border-top-right-radius: 5px;
    }
   
    .palete-color__content {
        padding: 10px;
        color: #a9abab;
    }
    .palete-color__name {
        font-size: 12px;
        font-weight: medium;
        text-transform: uppercase;
        color: #444545;margin-top:0rem;margin-bottom:0rem;
    }
    .palete-color__code {
        font-size: 11px;
        line-height: .8em;
        text-transform: uppercase;
		display:inline-block!important;
		position:relative;
    }
    
    /* Round */
    .palete--round {
      border-radius: 50%;
      text-align: center;
    }
    .palete--round .palete-color {
      height: 50%;
    }
    .palete--round .palete-color__square {
      height: 100%;
    }
    .palete--round .palete-color__lighten {
      border-top-left-radius: 100%;
    }
    .palete--round .palete-color__square.palete-color__lighten:hover {
      -webkit-border-radius: 1000px 1000px 0 0;
      -moz-border-radius: 1000px 1000px 0 0;
      border-radius: 1000px 1000px 0 0;
      /* Border-radius Greater or equal to width*/
    }
    .palete--round .palete-color__darken {
      border-top-right-radius: 100%;
    }
    .palete--round .palete-color__square.palete-color__darken:hover {
      -webkit-border-radius: 1000px 1000px 0 0;
      -moz-border-radius: 1000px 1000px 0 0;
      border-radius: 1000px 1000px 0 0;
      /* Border-radius Greater or equal to width*/
    }

    /* Square */
    .palete--square {} /* must set a height */
    .palete--square .palete-color {
      height: 50%;
    }
    .palete--square .palete-color__square {
      height: 100%;
    }
    .palete--square .palete-color__content {
      padding-top: 18px;
    }
    .palete--square .palete-color__code {
      line-height: 1.4;
    }
    .palete--square .palete-color__code:last-child {
      display: block;
    }

	.list-palete2 {
	  width: 100%;
	  float: left;
		margin-bottom:4rem;
	}

	 .list-palete2 > .palete{
	  width: 5%;
	  margin: 2.5%;
	  margin-left: 2.5%;
	  float: left;

	}

	.list-palete {
	  width: 100%;
	  float: left;
	  margin-bottom:4rem;
		padding-top:3rem;
	}
	.list-palete > .palete {
		width: 20%;
		margin: 2.5%;
		float: left;
	}

	.list-palete > .palete--round,
	.list-palete > .palete--square{
	  height: 153px;
	  background-color: white;
		    font-family: 'Khula Regular', sans-serif!important;
	}

	.list-palete2 > .palete--round,
	.list-palete2 > .palete--square{
	  height: 103px;
	}

	/*
	 Examples
	 */
	.examples { 
	  float: left;
	  width: 340px;
	  margin: 0 20px;
	}

	.example {
	  margin: 40px auto;
	}

	.example--rectangle {
	  width: 200px;
	}

	.example--round {
	  width: 200px;
	  height: 200px;
	}

	.example--square {
	  width: 200px;
	  height: 200px;
	}

    /* ###########
       THEME
       ########### */

    /* 
     * Trace orange  
     */
    .palete-color--traceblue > .palete-color__lighten {
        background-color: #477AB0;
    }
    .palete-color--traceblue > .palete-color__darken {
        background-color: #477AB0;
    }


/* 
     * Trace blue  
     */
    .palete-color--traceorange > .palete-color__lighten {
        background-color: #dd782a;
    }
    .palete-color--traceorange > .palete-color__darken {
        background-color: #d45c00;
    }


    /* 
     * Trace red  
     */
    .palete-color--tracered > .palete-color__lighten {
        background-color: #C1533D;
    }
    .palete-color--tracered > .palete-color__darken {
        background-color: #C1533D;
    }

  
    /* 
     * Trace red  
     */
    .palete-color--tracegreen > .palete-color__lighten {
        background-color: #01662b;
    }
    .palete-color--tracegreen > .palete-color__darken {
        background-color: #01662b;
    }

  


  

    /* 
     * Pale flesh  
     */
    .palete-color--paleflesh > .palete-color__lighten {
        background-color: #f7d7cc;
    }
    .palete-color--paleflesh > .palete-color__darken {
        background-color: #e3c0b4;
    }

    /* 
     * flesh  
     */
    .palete-color--flesh > .palete-color__lighten {
        background-color: #d8ab9e;
    }
    .palete-color--flesh > .palete-color__darken {
        background-color: #d79885;
    }
    
    /* 
     * suntan  
     */
    .palete-color--suntan > .palete-color__lighten {
        background-color: #bfa59f;
    }
    .palete-color--suntan > .palete-color__darken {
        background-color: #bb9288;
    }
    


     /* 
     * Grapefruit  
     */
    .palete-color--grapefruit > .palete-color__lighten {
        background-color: #ed5565;
    }
    .palete-color--grapefruit > .palete-color__darken {
        background-color: #da4453;
    }

    /* 
     * Bittersweet  
     */
    .palete-color--amokred > .palete-color__lighten {
        background-color: #fc6e51;
    }
    .palete-color--amokred > .palete-color__darken {
        background-color: #e9573f;
    }


     /* 
     * Amok yellow  
     */
    .palete-color--turquoise > .palete-color__lighten {
        background-color: #619bb3;
    }
    .palete-color--turquoise > .palete-color__darken {
        background-color: #3b6c81;
    }

    
    /* 
     * Amok red  
     */
    .palete-color--amokyellow > .palete-color__lighten {
        background-color: #fff200;
    }
    .palete-color--amokyellow > .palete-color__darken {
        background-color: #fffba8;
    }


    /* 
     * Amok orange  
     */
    .palete-color--amokorange > .palete-color__lighten {
        background-color: #f99b1c;
    }
    .palete-color--amokorange > .palete-color__darken {
        background-color: #c17713;
    }


	/* 
     * Amok orange  
     */
    .palete-color--violet > .palete-color__lighten {
        background-color: #d677db;
    }
    .palete-color--violet > .palete-color__darken {
        background-color: #be4dc4;
    }






    /* 
     * Bittersweet  
     */
    .palete-color--bittersweet > .palete-color__lighten {
        background-color: #fc6e51;
    }
    .palete-color--bittersweet > .palete-color__darken {
        background-color: #e9573f;
    }


    /* 
     * Sunflower  
     */
    .palete-color--sunflower > .palete-color__lighten {
        background-color: #ffce54;
    }
    .palete-color--sunflower > .palete-color__darken {
        background-color: #fcbb42;
    }

    /* 
     * Grass  
     */
    .palete-color--grass > .palete-color__lighten {
        background-color: #a0d468;
    }
    .palete-color--grass > .palete-color__darken {
        background-color: #8cc152;
    }

    /* 
     * Mint  
     */
    .palete-color--mint > .palete-color__lighten {
        background-color: #48cfad;
    }
    .palete-color--mint > .palete-color__darken {
        background-color: #37bc9b;
    }

    /* 
     * Pale Yellow  
     */
    .palete-color--paleYellow > .palete-color__lighten {
        background-color: #e3e3be;
    }
    .palete-color--paleYellow > .palete-color__darken {
        background-color: #ffffe7;
    }

    /* 
     * Ocre  
     */
    .palete-color--gold > .palete-color__lighten {
        background-color: #f0b75e;
    }
    .palete-color--gold > .palete-color__darken {
        background-color: #dba552;
    }

    /* 
     * Deep Brown  
     */
    .palete-color--deepBrown > .palete-color__lighten {
        background-color: #3d2307;
    }
    .palete-color--deepBrown > .palete-color__darken {
        background-color: #2a1804;
    }


/* 
     * nbared  
     */
    .palete-color--nbared > .palete-color__lighten {
        background-color: #ed3b02;
    }
    .palete-color--nbared > .palete-color__darken {
        background-color: #be360a;
    }

/* 
     * nbablue 
     */
    .palete-color--nbablue > .palete-color__lighten {
        background-color: #1d54ef;
    }
    .palete-color--nbablue > .palete-color__darken {
        background-color: #1442c1;
    }

    

/* 


/* 
     * nbared  
     */
    .palete-color--playersReds > .palete-color__lighten {
        background-color: #eb7d84;
    }
    .palete-color--playersReds > .palete-color__darken {
        background-color: #982b1c;
    }

/* 
     * nbablue 
     */
    .palete-color--playersYellow > .palete-color__lighten {
        background-color: #f7c870;
    }
    .palete-color--playersYellow > .palete-color__darken {
        background-color: #fae5cf;
    }

    

/* 


/* 
     * nbaFlesh 
     */
    .palete-color--playersFlesh > .palete-color__lighten {
        background-color: #d3481a;
    }
    .palete-color--playersFlesh > .palete-color__darken {
        background-color: #ff9849;
    }

/* 


     * Aqua  
     */
    .palete-color--rayred > .palete-color__lighten {
        background-color: #fb1212;
    }
    .palete-color--rayred > .palete-color__darken {
        background-color: #fb1212;
    }

  
    .palete-color--rayblue > .palete-color__lighten {
        background-color: #0000a4;
    }
    .palete-color--rayblue > .palete-color__darken {
        background-color: #0000a4;
    }
    

    .palete-color--rayyellow > .palete-color__lighten {
        background-color: #fdc00f;
    }
    .palete-color--rayyellow > .palete-color__darken {
        background-color: #fdc00f;
    }
    

/* 


     * Aqua  
     */
    .palete-color--raygreen > .palete-color__lighten {
        background-color: #4a5c29;
    }
    .palete-color--raygreen > .palete-color__darken {
        background-color: #1c2d46;
    }


/* 
     * w2green  
     */
    .palete-color--w2green > .palete-color__lighten {
        background-color: #c5cc2e;
    }
    .palete-color--w2green > .palete-color__darken {
        background-color: #a8ae1f;
    }

/* 
     * ec corp  
     */
    .palete-color--corp > .palete-color__lighten {
        background-color: #003399;
    }
    .palete-color--corp > .palete-color__darken {
        background-color: #003399;
    }

/* 
	 * ec corp  
     */
    .palete-color--corpYellow > .palete-color__lighten {
        background-color: #ffed00;
    }
    .palete-color--corpYellow > .palete-color__darken {
        background-color: #ffed00;
    }

/*
	* ec corp  
     */
    .palete-color--corpLightGrey > .palete-color__lighten {
        background-color: #c5c6c8;
    }
    .palete-color--corpLightGrey > .palete-color__darken {
        background-color: #c5c6c8;
    }


/*
	* ec corp  
     */
    .palete-color--corpDeepGrey > .palete-color__lighten {
        background-color: #646567;
    }
    .palete-color--corpDeepGrey > .palete-color__darken {
        background-color: #646567;
    }



/* 
     * EC blue  
     */
    .palete-color--myIC > .palete-color__lighten {
        background-color: #163d68;
    }
    .palete-color--myIC > .palete-color__darken {
        background-color: #102d4d;
    }


/* 
     * EC blue  
     */
    .palete-color--myIC2 > .palete-color__lighten {
        background-color: #7293a6;
    }
    .palete-color--myIC2 > .palete-color__darken {
        background-color: #35637d;
    }


/* 
     * EC blue  
     */
    .palete-color--myIC3 > .palete-color__lighten {
        background-color: #d6dfe4;
    }
    .palete-color--myIC3 > .palete-color__darken {
        background-color: #98bbcf;
    }




    

    /* 
     * w2g 
     */
    .palete-color--w2g > .palete-color__lighten {
        background-color: #1e5382;
    }
    .palete-color--w2g > .palete-color__darken {
        background-color: #123b5f;
    }

/* 
     * darkBlue  
     */
    .palete-color--darkBlue > .palete-color__lighten {
        background-color: #132033;
    }
    .palete-color--darkBlue > .palete-color__darken {
        background-color: #1b2637;
    }

/* 
     * cyan  
     */
    .palete-color--cyan > .palete-color__lighten {
        background-color: #32bdf5;
    }
    .palete-color--cyan > .palete-color__darken {
        background-color: #1b81aa;
    }

/* 
     * Ocre  
     */
    .palete-color--ocre > .palete-color__lighten {
        background-color: #b18f46;
    }
    .palete-color--ocre > .palete-color__darken {
        background-color: #997a38;
    }

/* 
     * Black  
     */
    .palete-color--black > .palete-color__lighten {
        background-color: #070707;
    }
    .palete-color--black > .palete-color__darken {
        background-color: #232323;
    }

    /* 
     * Yellow  
     */
    .palete-color--yellow > .palete-color__lighten {
        background-color: #dab92b;
    }
    .palete-color--yellow > .palete-color__darken {
        background-color: #c0a324;
    }

    /* 
     * Purple  
     */
    .palete-color--purple > .palete-color__lighten {
        background-color: #864388;
    }
    .palete-color--purple > .palete-color__darken {
        background-color: #623064;
    }
   
    /* 
     * Purple  
     */
    .palete-color--green > .palete-color__lighten {
        background-color: #4aa370;
    }
    .palete-color--green > .palete-color__darken {
        background-color: #348155;
    }
    
    /* 
     * Purple  
     */
    .palete-color--yellow2 > .palete-color__lighten {
        background-color: #ffea00;
    }
    .palete-color--yellow2 > .palete-color__darken {
        background-color: #348155;
    }

/* 
     * Symposium Blue  
     */
    .palete-color--symposiumblue > .palete-color__lighten {
        background-color: #2d7cbf;
    }
    .palete-color--symposiumblue > .palete-color__darken {
        background-color: #2066a1;
    }




    /* 
     * White  
     */
    .palete-color--white > .palete-color__lighten {
        background-color: #E9E7E7;
    }
    .palete-color--white > .palete-color__darken {
        background-color: #B4B4B4;
    }


    /* 
     * Cyan Blue  
     */
    .palete-color--cyanBlue > .palete-color__lighten {
        background-color: #43a5df;
    }
    .palete-color--cyanBlue > .palete-color__darken {
        background-color: #3696cf;
    }

    
    /* 
     * Deep Blue  
     */
    .palete-color--deepBlue > .palete-color__lighten {
        background-color: #3276b7;
    }
    .palete-color--deepBlue > .palete-color__darken {
        background-color: #2c669d;
    }

    

    /* 
     * Blue Jeans 
     */
    .palete-color--blue-jeans > .palete-color__lighten {
        background-color: #5d9cec;
    }
    .palete-color--blue-jeans > .palete-color__darken {
        background-color: #4a89dc;
    }

    /* 
     * Lavender  
     */
    .palete-color--lavender > .palete-color__lighten {
        background-color: #ac92ec;
    }
    .palete-color--lavender > .palete-color__darken {
        background-color: #967adc;
    }

    /* 
     * Pink Rose  
     */
    .palete-color--pink-rose > .palete-color__lighten {
        background-color: #ec87c0;
    }
    .palete-color--pink-rose > .palete-color__darken {
        background-color: #d770ad;
    }

    /* 
     * Light Gray  
     */
    .palete-color--light-gray > .palete-color__lighten {
        background-color: #f5f7fa;
    }
    .palete-color--light-gray > .palete-color__darken {
        background-color: #e6e9ed;
    }

    /* 
     * Medium Gray  
     */
    .palete-color--medium-gray > .palete-color__lighten {
        background-color: #ccd1d9;
    }
    .palete-color--medium-gray > .palete-color__darken {
        background-color: #aab2bd;
    }

    /* 
     * Dark Gray  
     */
    .palete-color--dark-gray > .palete-color__lighten {
        background-color: #656d78;
    }
    .palete-color--dark-gray > .palete-color__darken {
        background-color: #434a54;
    }



    .palete-color--peugeotblue > .palete-color__lighten {
        background-color: #219dee;
    }
    .palete-color--peugeotblue > .palete-color__darken {
        background-color: #219dee;
    }
    

     .palete-color--peugeotdark > .palete-color__lighten {
        background-color: #132033;
    }
    .palete-color--peugeotdark > .palete-color__darken {
        background-color: #132033;
    }


    .palete-color--council > .palete-color__lighten {
        background-color: #224191;
    }
    .palete-color--council > .palete-color__darken {
        background-color: #224191;
    }

    .palete-color--council > .palete-color__lighten {
        background-color: #224191;
    }
    .palete-color--councildark > .palete-color__darken {
        background-color: #224191;
    }

    .palete-color--instantPayYellow > .palete-color__lighten {
        background-color: #fdf4ce;
    }
    .palete-color--instantPayYellow > .palete-color__darken {
        background-color: #fdf4ce;
    }
    
    .palete-color--instantPayBlue > .palete-color__lighten {
        background-color: #cad8ec;
    }
    .palete-color--instantPayBlue > .palete-color__darken {
        background-color: #cad8ec;
    }



.products {
    display: flex;
    align-items: center;
    width: 150px;
	color:white;
}

.products2 {
    display: flex;
    align-items: center;
    width: 60px;
}



/* ADOBE */

.content-section ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    background-color: var(--content-bg);
    padding-left: 0;
    margin: 0;
    border-radius: 14px;
    border: 1px solid var(--theme-bg-color);
    cursor: pointer;
}

.content-section ul li {
    list-style: none;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    font-size: 16px;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    transition: 0.3s;
}

.content-section ul svg {
    width: 28px;
    border-radius: 6px;
    margin-right: 16px;
    flex-shrink: 0;
}

.status {
    margin-left: auto;
    width: 140px;
    font-size: 15px;
    position: relative;
	color:white;
}

.status-circle.green {
    background-color: #3bf083;
}
.status-circle {
    width: 6px;
    height: 6px;
    background-color: #396df0;
    position: absolute;
    border-radius: 50%;
    top: 4px;
    left: -20px;
}


.button-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 187px;
    margin-left: auto;
}


.status-button.open {
    background: none;
    color: var(--button-inactive);
    border: 1px solid var(--button-inactive);
}
.status-button {
    font-size: 15px;
    margin-top: 0;
    padding: 6px 24px;
}
.content-button {
    background-color: #3a6df0;
    border: none;
    padding: 8px 26px;
    color: #fff;
    border-radius: 20px;
    margin-top: 16px;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap;
}
[type=submit], [type=reset], button, html [type=button] {
    -webkit-appearance: button;
}
button, select {
    text-transform: none;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--theme-color);
    padding: 20px 40px;
    height: 100%;
    overflow: auto;
    background-color: var(--theme-bg-color);
}
section#icons {
  top: 20%;
  left: 0%;
  width: 100%;
  position: relative;
  margin-left: 0px;
}

.upper-header{
	margin-top:10rem;
	padding-left: 20rem;
	padding-right: 20rem;
}

.lower-header{
	padding-left: 15rem;
	padding-right: 15rem;
}

.job-cards {
  padding-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  -webkit-animation: slideY 0.6s both;
  animation: slideY 0.6s both;
	padding-left: 26rem;
	padding-right: 26rem;
}

.job-card {
  padding: 20px 16px;
  background-color: var(--header-bg-color);
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
    font-family: 'Larsseit', sans-serif;

}
.job-card:hover {
  transform: scale(1.02);
}
.job-card svg {
  width: 46px;
  padding: 10px;
  border-radius: 8px;
}
.job-card-title {
  font-weight: 600;
  margin-top: 16px;
  font-size: 24px;
}
.job-card-subtitle {
  color: var(--subtitle-color);
  font-size: 19px;
  margin-top: 14px;
  margin-bottom: 14px;
  line-height: 1.6em;
}
.job-card-header {
  display: flex;
  align-items: flex-start;
}

.overview-card:hover {
  background: #2b2ecf;
  transition: none;
  transform: scale(1);
}
.overview-card:hover svg {
  box-shadow: none;
}
.overview-card:hover .job-overview-buttons .search-buttons.time-button,
.overview-card:hover .job-overview-buttons .search-buttons.level-button {
  background-color: #575ad8;
  color: #fff;
}
.overview-card:hover .job-card-title,
.overview-card:hover .job-stat {
  color: #fff;
}
.overview-card:hover .job-card-subtitle,
.overview-card:hover .job-day {
  color: #dedede;
}
.overview-card:hover .overview-wrapper .heart {
  color: #fff;
  border-color: #fff;
}
.overview-card:hover .overview-wrapper .heart:hover {
  fill: red;
  stroke: red;
  transform: scale(1.1);
}

.detail-button {
  background-color: #e1ebfb!important;
  color: var(--active-color);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 4px!important;
  border:none;
}
.detail-button + .detail-button {
  margin-left: 4px;
	margin-top: 14px;
	margin-bottom: 14px;
}

.job-card-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
  border:none!important;
}

.card-buttons,
.card-buttons-msg {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  cursor: pointer;
	border:none!important;
}

.card-buttons {margin-right: 12px;}
.card-buttons-msg {
  background-color: #0162ff;
  color: white;
}

.menu-dot {
  background-color: #0162ff;
  box-shadow: -6px 0 0 0 var(--placeholder-color), 6px 0 0 0 var(--placeholder-color);
  width: 4px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  margin-left: auto;
  margin-right: 8px;
}

.header-shadow {
  box-shadow: 0 4px 20px rgba(88, 99, 148, 0.17);
  z-index: 1;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 100%!important;}

body footer .footer{padding-left: 11rem!important;padding-right: 11rem!important;}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}



.container {
  width: 100%;
  margin: auto;
  max-width: 1150px;
}

.navbar {
  width: 100%;
  background: rgba(255, 255, 255, 0.77);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: fixed;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  -moz-backdrop-filter: blur(1rem);
  box-shadow: 0 0.8rem 1.5rem rgba(var(--color-primary-dark-code), 0.1);
  height: 65px;
  z-index: 1000;
}

.section {
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.underline {
  position: relative;
  margin-bottom: 5rem;
}
.underline:after {
  content: "";
  width: 5rem;
  height: 0.25rem;
  position: absolute;
  bottom: -2rem;
  background: var(--color-secondary);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-family-heading);
  font-weight: 400;
}
.nav__brand__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.nav__brand {
  font-size: var(--font-size-h3);
  font-family: 'Khula Regular', sans-serif!important;
  font-weight: 600;
  text-transform: uppercase;
}
.nav__brand a {
  color: var(--color-primary);
}
.nav__list {
  height: 100%;
  align-items: center;
  transition: 0.2s ease-in-out;
}
.nav__list li {
  height: 100%;
}
.nav__link {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  height: 100%;
  color: #303030;
  display: flex;
  align-items: center;
  font-size: var(--font-size-body-larger);
}
.nav__link:hover {
  color: var(--color-primary);
}
.nav__link.active {
  font-weight: 600;
}
.nav__opener {
  align-self: center;
  align-items: flex-end;
  flex-flow: column nowrap;
  justify-content: space-around;
  border-radius: 4px;
  margin: 4px;
  height: 2.5rem;
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  transition: 0.3s ease-out;
  display: none;
}
.nav__opener .bar {
  width: 2.5rem;
  height: 3px;
  background: var(--color-primary);
  border-radius: 8px;
  display: inline-block;
  transition: inherit;
}
.nav__opener .bar:nth-child(2) {
  width: 1.5rem;
  align-self: flex-end;
}

.btn {
  padding: 1.2rem 2rem;
  box-shadow: 0 1rem 2rem rgba(var(--color-primary-dark-code), 0.15), 0 1rem 1rem rgba(var(--color-primary-dark-code), 0.05);
  border-radius: 15rem;
  font-weight: 500;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: 0.3 ease-in-out;
  min-height: 57px;
  box-sizing: border-box;
  font-size: 1.2rem;
}
.btn img {
  margin-right: 0.75rem;
}
.btn:hover {
  box-shadow: 0 0.5rem 0.8rem rgba(var(--color-primary-code), 0.15);
  transform: scale(0.985);
}
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover img {
  animation: zoom 0.4s ease-in-out;
}
.btn--secondary {
  background: #fff;
  color: var(--color-primary);
}
.btn--secondary:hover img {
  animation: shake 0.4s ease-in-out;
}
.header {
  background-image: linear-gradient(90deg, rgba(228, 219, 255, 0.7) 55%, rgba(228, 219, 255, 0.25)), url("https://github.com/AmmDuncan/portfolio/blob/master/Frame%202.png?raw=true");
  background-size: cover;
  padding-bottom: 25vh;
  background-position: left middle;
  transition: 0.5 ease-in-out;
}

.hero .content {
  max-width: 600px;
  padding-top: 20vh;
}
.hero .content h3 {
  font-size: var(--font-size-body-larger);
  font-size: var(--font-size-h3);
  font-weight: 400;
  margin: 1rem 0;
}
.hero .content h1 {
  font-family: 'Gilroy-Bold ☞', sans-serif!important;
  animation: bounce-in 0.5s ease-out forwards;
  font-weight: bold;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.hero .content h1.go {
  animation: slide-down-out 0.5s ease-in-out forwards;
}
.hero .content h1 .highlight {
  display: inline-block;
  position: relative;
  color: var(--color-primary);
}


body article .reduceleft{
	padding-top:10rem;
	padding-left: 15rem;
    padding-right: 15rem;
	padding-bottom:8rem;
}

body article .reduceleftlast{
	padding-top:20rem;
	padding-left: 18rem;
    padding-right: 27rem;
	padding-bottom:8rem!important;
}

body article .reduceright{
	padding-top:20rem!important;
    padding-left: 27rem;
    padding-right: 18rem;
	padding-bottom:8rem!important;
}

.endsection{
	padding-bottom:20rem!important;
}

.profile {
  animation: loadProfile 0.6s ease-in-out;
  animation-fill-mode: both;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  position: relative;
  max-height: 850px;
  max-width: 80%;
}

.profile-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 10px;
  background: white;
  box-shadow: 0 30px 50px -20px rgba(14, 0, 47, 0.21);
  width: calc(100% - 0px);
  height: calc(100% - 110px);
  z-index: -1;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  margin-top:0rem;
} 

.profile-image {
  animation: loadProfileImage 1s ease-in-out 0.5s;
  animation-fill-mode: both;
  position: relative;
  border-radius: 20px;
  box-shadow: 0 25px 45px -20px rgba(53, 60, 247, 0.55),inset 0 0px 120px rgba(55, 13, 1, 0.75);
  width: 100%;
  height:880px;
  flex: none;
  background-image: url("../img/MeParis.png");
  background-size: cover;
  background-position: center;
  margin-left: 0rem;
	margin-bottom:8rem;
}

.profile-image::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: transparent;
  opacity: 1;
}

.camera {
  color: white;
  position: absolute;
  bottom: 28px;
  left: 28px;
  font-size: 1.3rem;
}

.profile-info {
  margin-top: 120px;
  padding: 13% 8% 2% 8%;*-
  position: relative;
}

.profile-info h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.7rem;
  position: absolute;
  animation-fill-mode: both;
	color:#232323;
}

h1.first-name {
  animation: titleEffect 1s cubic-bezier(0,0.2,0.4,1);
  top: 25px;
  left: 25px;
} 

h1.second-name {
  animation: titleEffect 1s cubic-bezier(0,0,0.3,1);
  top: -50px;
  left: 5px;
}

.profile-info h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  margin-top: 0;
  margin-bottom: 5%;
}

.social-media-icons a,
.profile-info h2 {
  color: #007bff;
}

.profile-info p {
  margin-bottom: 20px;
  color: #232323;
  font-size: 1.8em;
  font-family: 'Khula', sans-serif;

}

.social-media-icons {
  display: flex;
  width: 50%;
	  padding-bottom:2rem!important;
  border-radius:1rem!important;
}

.social-media-icons a {
      transition: text-shadow 0.5s ease;
    background: rgb(0, 11, 72, 0.2);
    padding: 1rem;
    border-radius: 8px;
    border: 4px solid white;


}
.fab {
    font-family: "Font Awesome 5 Brands";
	font-size:1.4rem!important;
}
.camera,
.social-media-icons a {
  transition: text-shadow 0.5s ease;
}

.camera:hover,
.social-media-icons a:hover {
  text-shadow: 0px 5px 15px rgba(255, 0, 47, 0.45);
}

.statistics {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: -100px;
  line-height: 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.statistics p {
  margin: 3%;
  flex: auto;
  color: #f63d47;
}

.statistics p strong {
  font-size: 1.4rem;
  color: #000;
  font-weight: 200;
  margin-right: 0.3rem;
}

.icon {
  background: transparent no-repeat center;
  background-size: contain;
  background-origin: content-box;
  width: 60px;
  height: 60px;
  padding: 15px;
  border: none;
  transition: transform 0.5s ease;
}

.icon:hover {
  transform: scale(0.9);
}

.arrow {
  flex: 0 1 75px;
  background-image: url("https://zephyo.github.io/22Days/code/3/graphics/arrow.svg");
}

.right {
  transform: rotate(180deg);
}

.right:hover {
  transform: scale(0.9) rotate(180deg);
}

.close {
  background-image: url("https://zephyo.github.io/22Days/code/3/graphics/close.svg");
  position: absolute;
  top: 5px;
  right: 10px;
}

@media only screen and (max-aspect-ratio: 4/7) and (max-width: 600px) {
  .profile {
    margin: 3%;
    height: 97%;
  }
  .container {
    height: 86%;
    flex-direction: column;
  }
  .profile-image {
    height: 40%;
    width: calc(100% - 90px);
  }
  .profile-bg {
    width: 100%;
  }
  h1.first-name {
    left: 10px;
  }
  h1.second-name {
    left: 60px;
  }
	
	.profile {
  animation: loadProfile 0.6s ease-in-out;
  animation-fill-mode: both;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  position: relative;
  max-height: 750px;
  max-width: 100%!important;
  padding-left:3rem!important;
  padding-right:3rem!important;
  }
	
	h1.first-name {
    top: -25px;
	}
}

@media screen and (min-aspect-ratio: 4/7) {
  .profile {
    margin:0px auto 400px auto;
	  line-height:1.1!important;
  }
}

@keyframes backgroundAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes loadProfile {
 from{
    transform: translateY(100px);
    opacity: 0;
  }
 to {
     transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes loadProfileImage {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
 to {
     transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes titleEffect {
 from {
   opacity:0;
     transform: translateX(-75px);
  }
  to {
     transform: translateX(0px);
    opacity: 1;
  }
}






/* MEDIA QUERIES */



@media (max-width: 1800px) {
	.palete--square .palete-color {height: 40%;}
	.hs__item {
    flex-grow: 1;
    flex-shrink: 0;
	flex-basis: calc(130% / 4 - (10px * 2) - (20px / 4));}
	.hs__item {margin-left: 500px;}
	.destinations .grid img.small,
	.destinations .grid img.large {flex-basis: 50%;width: 45%;height: 30vh;}
}



@media only screen and (max-width: 1625px){
	body article header  {
    padding-left: 0rem!important;
    padding-right: 0rem!important;
	margin-left: 0rem!important;
    margin-right: 0rem!important;
	} 
	
	body .main-article p {
    font-size: 25px!important;
	}
	
	.cd-header {
    padding-left: 12rem;
    padding-right: 12rem;
	} 
	
	.upper-header {
    margin-top: 10rem;
    padding-left: 15rem;
    padding-right: 15rem;
	} 
	
	.lower-header {
    margin-top: 10rem;
    padding-left: 15rem;
    padding-right: 15rem;
	}
	
	body article header{
    padding-left: 0rem!important;
	margin-left: 0rem!important;
	}
	
	.summary {
    margin-top: 10rem;
    padding-left: 5rem;
    padding-right: 5rem;
	}
	
	body .main-article {
    margin-top: 0rem;
    padding-left: 15rem!important;
    padding-right:15rem!important;
	}
	#reveal1111.visible {margin-left: 0rem;}
	.videoindex {border-radius: 1.4rem!important;width: 100%;}
	body .summary {margin-top: 3rem;padding-left: 15rem!important;padding-right: 15rem!important;}
	.hs__wrapper .hs__arrows {
    text-align: right;
    display: inline-block!important;
    margin-top: 0rem;
    padding-left: 15rem!important;
	}
	.products {font-size: 25px!important;}
	.status {font-size: 1em!important;}
	.status-button{font-size: 1em!important;}
	body .testimonials {margin-top: 5rem;padding-left: 15rem!important;padding-right: 15rem!important;}
	body .mapContainer {padding-left: 15rem!important;padding-right: 15rem!important;width: 100%;border-radius:10px;overflow:hidden;margin-bottom:20rem!important;margin-top:0rem!important;padding-bottom:20rem!important;}
	.hero h1 {
		font-weight: 900!important;
		padding-left:17rem!important;
	    padding-right:17rem!important;
		font-size:60px!important;
		line-height:1.1;
	}
	.hero h2 {padding-left:20rem!important;padding-right:20rem!important;}
	.palete--square .palete-color {height: 30%;}
	body .testimonials {margin-top: 5rem;padding-left: 15rem!important;padding-right: 15rem!important;}
	.profile-image{display:block!important;width:100%!important;height:400px;}
	.profile-info{display:block!important;width:100%!important;}
	.container {display: block;flex-direction: row;align-items: stretch;width: 100%;margin:0px auto 0px auto!important;}
	.profile-info h1 {font-size: 3rem;font-weight: 800;margin: 0.7rem;position: relative;animation-fill-mode: both;color: #232323;}
	.profile-info {margin-top: 30px!important;padding: 8% 8% 2% 8%;position: relative;}
	h1.first-name {animation: titleEffect 1s cubic-bezier(0,0.2,0.4,1);top: -5px;left: -5px!important;position:relative!important;}
	
	.slider-list {
    flex-flow: row;
    justify-content: flex-start;
    align-items: stretch;
    display: flex;
    position: relative;
	scale: 1.5;
	}
	.overlay-inner{scale: 1;}
	.overlay{scale: 1;}
	.profile-image {margin-left: 0rem;}
	.sectionskills {padding-left: 15rem!important;padding-right: 15rem!important;}
}




@media (max-width:1400px){
	.container {max-width: 1140px;}
	.hero h1 {
		margin-bottom: 15px;
		color: #353cf7;
		padding-left: 15rem;
		padding-right: 15rem;
		font-weight: 300;
	}
	.hero h3 {
		margin-bottom: 40px;
		color: #232323;
		padding-left: 23rem;
		padding-right: 23rem;
		font-size:27px!important;
	}
}


@media screen and (max-width: 1285px) {
	
    .cards-wrapper {grid-template-columns: 1fr 1fr;}
	.hero .background-image {top: 0%;left: -50%;width: 200%;height: 100%;}
	.heroheading {font-size: 40px!important;padding-top:50rem!important;}
	.display-xs {font-size: 30px!important;    margin-bottom: 1.5rem;}
	.w-button {font-size: 20px!important;}
	body .main-article p {margin-bottom: 3rem!important;padding-bottom: 1.5rem!important;font-size: 20px!important;}
	#w-node-_54bf919d-b0b4-1b11-6ff8-960830df5256-628bff5d, #w-node-_3fe515aa-2e07-1e22-9731-3690ead37cea-628bff5d {
    justify-self: start;
	}
	body article header {min-height: 0px!important;}
	body article .reduceright {padding-top: 0rem!important;padding-bottom: 0rem!important;}
	.card-container p {font-size: 25px!important;padding-left: 1rem!important;padding-right: 1rem!important;font-family: 'Khula Regular', sans-serif!important;}
	.job-cards {grid-template-columns: repeat(2, 1fr);}
	.hero h1 {
		margin-bottom: 15px;
		color: #353cf7;
		padding-left: 22rem;
		padding-right: 22rem;
		font-weight: 300;
		font-size:45px;
	}
	
	.hero h3 {
		margin-bottom: 40px;
		color: #232323;
		padding-left: 23rem;
		padding-right: 23rem;
		font-size:27px;
	}
	
	.centered {
		font-weight: 400;
		line-height: 1.3!important;
		font-size: 40px!important;
		color: #353cf7!important;
	}
	
	.centeredwhite {padding-top: 0rem;}
	.centeredwhite2 {padding-top: 6rem!important;}
	.contact form .btn {
    	padding: 9px;
    	width: 150px;
    	font-size: 12px
  	}

	.contact form input {
		padding: 9px;
		width: 250px;
	}
	
	.button-pl.a-cta {
    width: 80%;
    margin: 0px auto 0px auto;
	}

}


@media only screen and (max-width: 1100px){
	
	.hero .background-image {
    top: 0%;
    left: -50%;
    width: 150%;
    height: 100%;
	}
	
	.hero h1 {
    	font-family: 'Gilroy-Bold ☞', sans-serif!important;
		margin-bottom: 15px;
		color: #353cf7;
		padding-top: 5rem!important;
		padding-left: 8rem!important;
		padding-right: 8rem!important;
		font-weight: 900;
		font-size:50px;
		line-height:4rem;
	}
	.hero h2 {
    	font-family: 'Gilroy-Bold ☞', sans-serif!important;
		margin-bottom: 40px;
		color: #232323;
		padding-left: 8rem!important;
		padding-right: 8rem!important;
	}
	.hero h3 {
    	font-family: 'Gilroy-Bold ☞', sans-serif!important;
		margin-bottom: 40px;
		color: #232323;
		padding-left: 8rem!important;
		padding-right: 8rem!important;
	}
	
	.hero a.btn {
    padding: 20px 46px;
    font-size: 15px!important;
	}
	
	
	 body .summary {
    display: block!important;
	width:100%!important;
	}
	
	.summary-item {
	padding-top:1rem!important;
	padding-bottom:1rem!important;	
	}
	
	.hs__item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: calc(140% / 3 - (0px * 1) - (20px / 3));
	}
	
	body .testimonials {
    margin-top: 5rem;
    padding-left: 5rem!important;
    padding-right: 5rem!important;
	}
	
	
	.category {
	padding-left: 4rem!important;
    padding-right: 4rem!important;
	}
		
		.scroller-container {
    overflow: hidden;
    width: 100%!important;
	}
	.mapContainer{
		padding-left: 12rem!important;
		padding-right: 12rem!important;
	}
	
	#w-node-_3fe515aa-2e07-1e22-9731-3690ead37cec-628bff5d, #w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c02-628bff5d {
    padding-bottom:3rem;
	}
		
	.mapContainer{
	padding-left: 12rem!important;
    padding-right: 12rem!important;
	}
	
	.ds-grid {
	}
	
	.display-xs {
    font-size: 30px!important;
    margin-bottom:3rem;
	padding-top:2rem;
	}
	
	body article .reduceleft {
    padding-top: 4rem;
    padding-left: 15rem;
    padding-right: 15rem;
    padding-bottom: 5rem;
	}
	
	body article .reduceright {
    padding-top: 4rem;
    padding-left: 18rem;
    padding-right: 27rem;
    padding-bottom: 5rem!important;
	}
	
	.ds-image-wrap.cc-85 {width: 100%;}
	.main-article {
    padding-left: 10rem;
    padding-right: 10rem;
	}
	.scroller-img {
    max-width: 280px;
    max-height: 280px;
	}
}


@media screen and (max-width: 900px) {
	.hero .background-image {top: 0%;left: -80%;width: 250%;height: 100%;}
	.hero h1 {
    	font-family: 'Gilroy-Bold ☞', sans-serif!important;
		line-height:1.1;
		margin-bottom: 15px;
    	color: #353cf7;
		padding-top: 13rem;
    	font-weight: 900;
		padding-left:4rem!important;
	    padding-right:4rem!important;
		font-size:50px!important;
	}
	.hero h2 {
	  font-family: 'Khula', sans-serif!important;	  
    	margin-bottom: 0px;
    	color: #232323;
    	padding-left: 6rem!important;
    	padding-right: 6rem!important;
		font-size:30px!important;
	}
	.hero h3 {
    	font-family: 'Gilroy-Bold ☞', sans-serif!important;
    	margin-bottom: 40px;
    	color: #232323;
    	padding-left: 6rem;
    	padding-right: 6rem;
		font-size:2rem!important;
	}
	
	.hero a.btn {padding: 20px 46px;font-size: 15px!important;}
	.job-cards {grid-template-columns: repeat(1, 1fr);}
	.destinations .grid img.small,
	.destinations .grid img.large {flex-basis: 100%;width: 300px;height: 250px;}
  	.cards-wrapper {grid-template-columns: 1fr;}
  	.info {justify-content: center;}
  	.card-grid-space .num {margin-left: 0;text-align: center;}
	.profile-image {
    	animation: loadProfileImage 1s ease-in-out 0.5s;
    	animation-fill-mode: both;
    	position: relative;
    	border-radius: 10px;
    	box-shadow: 0 25px 45px -20px rgba(53, 60, 247, 0.55), inset 0 0px 120px rgba(55, 13, 1, 0.75);
    	width: 30%;
    	flex: none;
    	background-image: url(../img/MeParis2.png);
    	background-size: cover;
    	background-position: center;
    	margin-left: 0rem;
	}
	.scroller-container {overflow: hidden;width:90%!important;}
	.card-container p{font-size: 25px!important;line-height: 2rem!important;padding-bottom:3rem!important;}
	button.primary {font: bold 18px "Open Sans", sans-serif;}
	.profile {margin: -150px auto 400px auto;margin-bottom: 30rem!important;}
	body article header {min-height: 100px;}
	
	body .mapContainer {
    margin-top: 5rem;
    padding-left: 5rem!important;
    padding-right: 5rem!important;
	}
	
}

@media only screen and (max-width: 850px){
	
	body article header  {
    padding-left: 0rem!important;
    padding-right: 0rem!important;
	margin-left: 0rem!important;
    margin-right: 0rem!important;
	} 
	
	.cd-header {
    padding-left: 2rem;
    padding-right: 2rem;
	} 
	
	.upper-header {
    margin-top: 10rem;
    padding-left: 5rem;
    padding-right: 5rem;
	} 
	
	.lower-header {
    margin-top: 5rem;
    padding-left: 4rem;
    padding-right: 4rem;
	}
	
	.summary {
    margin-top: 5rem;
    padding-left: 5rem;
    padding-right: 5rem;
	}
	
	body .main-article {
    margin-top: -5rem!important;
    padding-left: 5rem!important;
    padding-right: 5rem!important;
	}
	
	body .summary {
    margin-top: 5rem;
    padding-left: 5rem!important;
    padding-right: 5rem!important;
	}
	
	body .testimonials {
    margin-top: 5rem;
    padding-left: 5rem!important;
    padding-right: 2rem!important;
	}
	
	.hs__wrapper .hs__arrows {
    text-align: right;
    display: inline-block!important;
    margin-top: 0rem;
    padding-left: 5rem!important;
	}
	
	.hs__item {
	flex-basis: calc(140% / 3 - (0px * 2) - (0px / 3))!important;
    margin-left: 380px;
	}
	
	.profile {
    max-height: 750px;
    max-width: 80%;
	margin: 0px auto 0px auto!important;
	}
	
	body .main-article p {
    font-size: 25px!important;
    font-family: 'Khula', sans-serif;
	}
	
	body .main-article h3 {
    text-align:center!important;
    font-size: 40px!important;
	font-family: 'Gilroy-Bold ☞', sans-serif!important;	
	padding-left: 0rem!important;
    padding-top: 3rem!important;
	font-weight:900;
	line-height:1.3!important;
	}
	.cardskills {padding-top:7rem!important;}
	.marginleft {
    margin-left: 0rem!important;
	}
	
	.name {
    font-size: 30px!important;
	}
	
	.card-container h6 {
	font-size: 20px!important;

	}
	.card-container p {
	font-size: 20px!important;

	}
	
	.skills ul li {
    
    font-size: 20px;
    line-height:1.8rem!important;
    padding: 10px!important;
	}
	
	#reveal1111.visible {
    margin-left: 0rem;
	}
	
	.cloneable {
	  min-height: 800px!important;
	}
	.overlay {
		width:55%!important;
	}
	
	[data-slider="slide"] {
    opacity: 1;
	}
	
	body .mapContainer {
    margin-top: 5rem;
    padding-left: 5rem!important;
    padding-right: 5rem!important;
	}
	.w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c02-628bff5d {
    grid-area: span 2/span 2/span 2/span 2;
    justify-self: start;
	}
	

	
	.w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c02-628bff5d {
    grid-area: span 2/span 1/span 2/span 1;
    justify-self: start;
}
	
	.ds-grid {
    grid-template-rows: auto;
    grid-template-columns: 2fr 1fr;
    grid-auto-columns: 0fr;
	display: grid;
	}
	
	.w-node-_3fe515aa-2e07-1e22-9731-3690ead37cea-628bff5d {
    grid-area: span 2/span 2/span 2/span 2;
    place-self: start;
}
 
	.w-node-_3fe515aa-2e07-1e22-9731-3690ead37cec-628bff5d, .w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c02-628bff5d {
    grid-area: span 1/span 2/span 1/span 1;
    justify-self: start;
}
	.w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c0d-628bff5d, .w-node-_3fbd4c4b-761f-b345-59fb-2ad9dbb5f022-628bff5d {

    grid-area: 1/span 2/span 1/span 1;
    justify-self: start;
    }
	.w-node-_3fbd4c4b-761f-b345-59fb-2ad9dbb5f024-628bff5d {
		 grid-area: span 2/span 2/span 2/span 2;
	}
	
}


@media screen and (max-width: 800px) {
	.testimonials .quote {font-size: 18px;margin: 15px 0;}
	.testimonials .author {font-size: 14px;}
	header {padding: 20px 50px;flex-direction: column;}
	header h2 {margin-bottom: 15px;    font-family: 'Khula', sans-serif;}
	section {padding: 50px 20px;}
	section p {font-size: 16px;}
	section h3.title {font-size: 25px;}
   .button-pl.a-cta {display: block;width: 80%;margin: 0px auto 0px auto;}
   .navbar {height: auto;}
   .navbar .nav {flex-flow: column;align-items: stretch;padding-right: 4px;}
   .navbar .nav .nav__brand__container {flex: 65px;align-items: center;}
   .navbar .nav .nav__brand__container .nav__opener {display: flex;}
   .navbar .nav .nav__list {
    max-height: 0;
    width: 99%;
    margin-left: 1%;
    overflow-y: hidden;
    flex-flow: column;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    list-style-type: none;
   }
   .navbar .nav .nav__list li {border-top: 1px solid rgba(220, 140, 255, 0.2);display: flex;align-items: center;}
   .navbar .nav .nav__link {padding-left: 0;padding: 1.5rem 2rem;width: 100%;font-size: var(--font-size-body-larger);}
   .navbar .nav .nav__link .active {background: rgba(var(--color-primary-dark-code));}
   .navbar.open .nav__list {max-height: 300px;margin-bottom: 4px;}
   .navbar.open .nav__opener .bar {margin-right: 0.5rem;}
   .navbar.open .nav__opener .bar:nth-child(1) {transform: rotate(-45deg);transform-origin: top right;}
   .navbar.open .nav__opener .bar:nth-child(2) {align-self: center;width: 0;}
   .navbar.open .nav__opener .bar:nth-child(3) {transform: rotate(45deg);transform-origin: bottom right;}
}




@media only screen and (max-width: 650px){
	
	.cloneable {
	  padding: var(--container-padding);
	  justify-content: center;
	  align-items: center;
	  min-height: 800px!important;
	  display: flex;
	  position: relative;
	  margin-top: -180px;
	  margin-bottom: 180px;
	}
	.mainBigTitle {
    font-size: 4rem!important;
	}
	
	.slider-list {
    margin-top:-6rem;
    padding-top: 0rem;
}
	
	.slider-slide {
    flex: none;
    width: 55.5em;
    height: 41em;
    padding-left: 1.25em;
    padding-right: 1.25em;
    transition: opacity .4s;
    position: relative;
}
	.slide-caption {
   
    font-size: 0.7rem;
}
	
	body .summary3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 2em;
	font-family: 'Khula', sans-serif;
	color:black!important;
	}
	
	item-title{
	justify-content: space-between;
    font-size: 2em!important;
	font-family: 'Khula', sans-serif;
	}
	
	body .summary .summary-item {
	justify-content: space-between;
    font-size: 3em!important;
	font-family: 'Khula', sans-serif;
	}
	
	.profile-image{display:block!important;width:100%!important;height:300px;}
	h1.first-name {position:relative!important;    left: -5px!important;}
	.container{text-align:center!important;}
	body .profile-info p{text-align:center!important;}
	body .fab{text-align:center!important;align-items: center!important;}
	body .media-icons a {text-align:center!important;align-items: center!important;}
	body .social-media-icons a{text-align:center!important;justify-content: space-evenly!important;align-items: center!important;}
	body .social-media-icons {text-align:center!important;justify-content: space-evenly!important;align-items: center!important;}
	.profile-image {height: 300px!important;width: calc(100% - 90px);}
	footer p {
    text-align: left;
    flex-basis: 0;
    margin-bottom: 20px;
    font-size: 12px;
	}
	
	.nav__list-item {
    font-size: 5vh;
    line-height: 1.45;
	}
	

	#w-node-_3fbd4c4b-761f-b345-59fb-2ad9dbb5f024-628bff5d {
		
		padding-bottom: 15rem;
	}
}

	body .mapContainer {
    margin-top: 5rem;
    padding-left: 15rem!important;
    padding-right: 15rem!important;
	}


	a,
    a:hover,
    a:focus,
    a:active {
    text-decoration: none;
    outline: none;
    }
        
    a,
    a:active,
    a:focus {
    color: black;
    text-decoration: none;
    transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-duration: .2s;
    -ms-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    }
        
    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    img {
    max-width: 100%;
    height: auto;
	}

	.testimonials {
    padding-left:15rem;
	padding-right:15rem;
	margin-top: 0rem;
	}

	.testimonials .heading {
    margin-bottom: 60px;
	}

	.testimonials .heading h2 {
    font-size: 30px;
    font-weight: 700;
    color: #313e4b;
    margin-bottom: 20px;
	font-family: 'Khula', sans-serif;
	}

	.testimonials .heading h2 span {
    font-weight: 300;
    color: #02a2c4;
    margin: 0;
	}

	.testimonials .heading p {
    font-size: 1.6em;
    font-weight: 300;
    line-height: 26px;
    margin: 0;
    color: #727f8c;
	}

	.testimonials .box {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 40px;
    border-radius: 15px;
    margin-bottom: 40px;
    transition: all 0.4s ease-in-out;
	min-height: 1050px;
	background-color: var(--content-bg);
	}

	.testimonials .box h3 {
    font-size: 30px!important;
	padding-top:1rem!important;
    font-weight: 500;
    color: #313e4b;
	font-family: 'Khula', sans-serif;
	}

	.testimonials .box:hover {
	transform: translateY(-10px);
	}

	.testimonials .box h3 span {
    font-size: 25px!important;
    color: #353cf7;
    margin-left: 0px;
	line-height:1.8rem!important;
	letter-spacing:0rem!important;
	font-family: 'Khula', sans-serif;
	padding-bottom:8rem!important;
	}

	.testimonials .box span {
    
	padding-top:2rem;
	}

	.testimonials .box p {
	margin-bottom: 20px;
    color: white;
    font-size: 25px!important;
    font-family: 'Khula', sans-serif!important;
    margin-bottom: 20px;
    margin-top: 25px;
    padding-right: 20px;
	line-height:1.3!important;
	letter-spacing:0rem!important;
	font-weight: 500!important;
	}

	.d-flex {
		display: -ms-flexbox!important;
		margin-top: 1rem;
	}

	body .fab {
		text-align: center!important;
		align-items: center!important;
		font-size: 2rem!important;
	}

	.testimonials .box .image img {
		width: 70px;
		border-radius: 50%;
		margin: 0;
		padding: 0;
		display: inline-block;
		margin-bottom:2rem!important;
	}

	.testimonials .box .icon {
		border: 2px solid #353cf7 !important;
		color: #353cf7;
		width: 65px!important;
		height: 65px;
		border-radius: 50%;
		display: inline-block;
		margin-right: 10px;
		text-decoration: none;
		transition: all 0.3s ease-in-out;
	}

	.testimonials .box .icon:hover {
		color: #ffffff;
		border: 2px solid #02a2c4;
		background: #02a2c4;
	}

	.cards-wrapper {
	  display: grid;
	  justify-content: center;
	  align-items: center;
	  grid-template-columns: 1fr 1fr 1fr;
	  grid-gap: 0rem;
	  padding-top: 4rem;
	  padding-bottom: 4rem;
	  padding-left: 0rem;
	  padding-right: 0rem;
	  margin: 0 auto;
	  width: 100%!important;
	}

	.card {
	  font-family: 'Gilroy-Bold ☞', sans-serif!important;
	  --bg-filter-opacity: 0.5;
	  background-image: linear-gradient(rgba(0,0,0,var(--bg-filter-opacity)),rgba(0,0,0,var(--bg-filter-opacity))), var(--bg-img);
	  height: 20em;
	  width: 15em;
	  font-size: 1.5em;
	  color: white;
	  border-radius: 1em!important;
	  padding: 1em;
	  /*margin: 2em;*/
	  display: flex;
	  align-items: flex-end;
	  background-size: cover;
	  background-position: center;
	  transition: all, var(--transition-time);
	  position: relative;
	  overflow: hidden;
	  border: 10px solid #ccc!important;
	  text-decoration: none;
	}

	.card:hover {
	  transform: rotate(0);
	}



	.card h1 {
	  margin: 0;
	  font-size: 1.5em;
		font-weight:900;
	  line-height: 1.2em;
	  font-family: 'Gilroy-Bold ☞', sans-serif!important;
	  padding-top:8rem!important
	}

	.card p {
	  font-family: 'Gilroy-Bold ☞', sans-serif!important;
	  font-size: 0.75em;
	  margin-top: 0.5em;
	  line-height: 2em;
	}

	.card .tags {
	  display: flex;
	}

	.card .tags .tag {
	  font-size: 0.75em;
	  background: rgba(255,255,255,0.5);
	  border-radius: 0.3rem;
	  padding: 0 0.5em;
	  margin-right: 0.5em;
	  line-height: 1.5em;
	  transition: all, var(--transition-time);
	}

	.card:hover .tags .tag {
	  background: var(--color);
	  color: white;
	}

	.card .date {
	  position: absolute;
	  top: 0;
	  right: 0;
	  font-size: 0.75em;
	  padding: 1em;
	  line-height: 1em;
	  opacity: .8;
	}

	.card:before, .card:after {
	  content: '';
	  transform: scale(0);
	  transform-origin: top left;
	  border-radius: 50%;
	  position: absolute;
	  left: -50%;
	  top: -50%;
	  z-index: -5;
	  transition: all, var(--transition-time);
	  transition-timing-function: ease-in-out;
	}

	.card:before {
	  background: #ddd;
	  width: 250%;
	  height: 250%;
	}

	.card:after {
	  background: white;
	  width: 200%;
	  height: 200%;
	}

	.card:hover {
	  color: var(--color);
	}

	.card:hover:before, .card:hover:after {
	  transform: scale(1);
	}

	.card-grid-space .num {
	  font-size: 3em;
	  margin-bottom: 1.2rem;
	  margin-left: 1rem;
	}

	.info {
	  font-size: 1.2em;
	  display: flex;
	  padding: 1em 3em;
	  height: 3em;
	}

	.info img {
	  height: 3em;
	  margin-right: 0.5em;
	}

	.info h1 {
	  font-size: 1em;
	  font-weight: normal;
	}

	.mapContainer{padding-left:27rem!important;padding-right:27rem!important;}

}







@media screen and (max-width: 600px) {
	.header {background-position: center;background-image: linear-gradient(50deg, rgba(228, 219, 255, 0.9) 55%, rgba(228, 219, 255, 0.5)), url("https://github.com/AmmDuncan/portfolio/blob/master/Frame%202.png?raw=true");}
    .hero{overflow: hidden;width:100%!important;}
	.hero .background-image {top: -13%;left: -70%;width: 590%;height: 120%;}
	.heroheading {line-height: 1.3em;font-weight: 900;margin: auto;margin-bottom: 18px;font-size: 3.4rem!important;position: relative;letter-spacing: .02em;padding-top: 6rem!important;}
	.hero h1 {padding-left:7rem!important;padding-right:7rem!important;font-size:40px!important;font-family: 'Gilroy-Bold ☞', sans-serif!important;padding-top:1rem!important;}
	.hero h2 {padding-left:5rem!important;padding-right:5rem!important;font-size:20px!important;font-family: 'Khula', sans-serif;}
	.hero h3 {font-family: 'Gilroy-Bold ☞', sans-serif!important;margin-bottom: 40px;color: #232323;padding-left: 6rem;padding-right: 6rem;font-size: 25px!important;line-height:2.3rem!important;}
	.hero a.btn {padding: 20px 46px;font-size: 15px!important;}
	.hero nav li {font-size: 15px;}
	body article .reduceleft {padding-bottom: 0rem!important;}
	body article .reduceright {padding-bottom: 0rem!important;}
	#reveal4 {margin-top: 0rem;}
	.overlay-count-row {font-size: 16em;}
	.button {border: 3px solid #353cf7;border-radius: .4em;}
    .cards-wrapper {padding: 4rem 2rem;}
    .card {max-width: calc(100vw - 4rem);}
    .scroller-container {overflow: hidden;width:90%!important;}
    .main-article{ overflow: hidden; width:100%!important;}
    .profile-image {animation: loadProfileImage 1s ease-in-out 0.5s;animation-fill-mode: both;position: relative;border-radius: 10px;box-shadow: 0 25px 45px -20px rgba(53, 60, 247, 0.55), inset 0 0px 120px rgba(55, 13, 1, 0.75);width: 30%;flex: none;background-image: url(../img/MeParis2.png);background-size: cover;background-position: center;margin-left: 0rem!important;}
    .cloneable{overflow: hidden;width:100%!important;}
	.spacer-16rem cc-8-on-mobile{overflow: hidden;width:100%!important;}
	.profile{width:100%!important;}
	.overlay{overflow: hidden;width:53%!important;}
	.count-column {height: 2.2em;overflow: hidden;}
	.main{overflow: hidden;width:100%!important;}
	.slider-wrap{overflow: hidden;width:100%!important;}
	.scroller-container{overflow: hidden;width:100%!important;}
	.scroller{width:100%!important;}section 
	.content {margin-left: 0px!important;padding-left: 0rem;padding-right: 0rem;}
	.testimonials .box p {margin-left: 0px!important;padding-left: 0rem;padding-right: 0rem;}img {max-width: 120%!important;}
	.social-media-icons {width: 100%!important;}
	.hs__item:first-child {margin-left: calc(-45px * 2);}h1
	.first-name {top: -55px!important;}body article header {padding-left: 0rem!important;padding-right: 0rem!important;margin-left: 0rem!important;margin-right: 0rem!important;}
	.profile {max-width: 100%!important;padding-left: 2rem!important;padding-right: 2rem!important;}[data-slider="slide"] {opacity: 1;}
	.videoindex {margin-top: 15rem!important;margin-bottom: 15rem!important;scale:2!important;}
	.display-xs.cc-center-on-mobile {text-align: center;margin-top: 4rem;}body article 
	.reduceleft .reduceright {padding-left: 3rem!important;padding-right: 3rem!important;}body article 
	.reduceright img {padding-left: 0rem!important;scale: 1.1!important;}
	.highlighted{padding-left: 0rem!important;text-align:center!important;padding-right: 0rem!important;}
	#reveal111.visible {overflow: visible!important;}
	#reveal1111.visible{overflow: visible!important;}
	#reveal11111.visible{overflow: visible!important;}
	#reveal4.visible {overflow: visible!important;}
	.main-article h5 {padding-top: 0rem;}
	.cloneable {margin-top: -4rem!important;min-height:800px!important;}body article 
	.reduceright {padding-left: 4rem!important;padding-right: 4rem!important;margin-top: -4rem!important;padding-bottom: 15rem!important;padding-top: 15rem!important;}body article 
	.reduceleft {padding-left: 4rem!important;padding-right: 4rem!important;}body article 
	.reduceleft img {padding-right: 0rem!important;padding-left: 0rem!important;scale: 1.1;}body article 
	.reduceleftlast img {padding-right: 0rem!important;padding-left: 0rem!important;scale: 1.1!important;}body 
	.mapContainer {padding-left: 4rem!important;padding-right: 4rem!important;}section 
	.content {margin-left:0px!important;}
	.logo-wrap a {line-height: 20px;}
	.hs__item {flex-basis: calc(180% / 3 - (0px * 2) - (10px / 3))!important;}
	
}








@media screen and (max-width: 480px) {
	.header-wrapper {position: relative;width: calc(100% - 100px);margin-left: 30px;}
	.videoindex{display:none;scale:2.4;margin-top:3rem!important;margin-bottom:6rem!important;}
	.hero {width:100%;overflow:hidden!important;}
	.hero h1 {
    	font-family: 'Gilroy-Bold ☞', sans-serif!important;
		padding-left:4rem!important;
	    padding-right:4rem!important;
		padding-top:1rem!important;
		font-size:40px!important;
	}
	.hero h2 {
    	font-family: 'Khula', sans-serif!important;
		margin-bottom:0px!;
    	padding-left:5rem!important;
	    padding-right:5rem!important;
		font-size:25px!important;
	}
	h3{padding-bottom:0rem!important;}
	.skills {padding: 35px;}
	.skills ul li {display: none;}
	.card-container h6 {display: none;}
	.par-md {
    color: white!important;
    letter-spacing: 0rem;
    font-weight: normal;
    line-height: 1.6!important;
	}
	.first {margin-top: 150px!important;}
	.sectionskills {padding-left: 4rem!important;padding-right: 4rem!important;}
	.sectionskills .container .cardskills .content p {
    text-align: center;
    margin: 0.625rem 0 1.25rem;
    color: white;
	}
	.sectionskills .container .card-inner .box .imgBox {min-height: 80px!important;}
	.container div {margin-bottom: 2rem;display: block;}
	
	.hero .content p {
	  transition: 0.5 ease-in;
	  margin-bottom: 2rem;
	  line-height: 1.6;
	  max-width: 500px;
	  font-size: var(--font-size-body-larger);
	}
	.hero .content .ctas {display: flex;align-items: center;margin-top: 2rem;}
	.hero .content .ctas .btn--primary {margin-right: 0.7rem;}
	.hero .content .ctas {width: 100%;flex-flow: column;align-items: stretch;}
  	.hero .content .ctas .btn--primary {margin-bottom: 1rem;margin-right: 0;}
	.heroheading {padding-top: 15rem!important;}
	.buttons{padding-left:1rem!important;padding-right:1rem!important;}
	body .main-article h3 {padding-top:0rem!important;padding-left:3rem!important;padding-right:3rem!important;}
	.content-section ul svg {width: 40px;}
	.display-xs {margin-bottom: 0rem;padding-top: 0rem;}
	.count-column {height: 4.6em;overflow: hidden;}
	.button {width: 15em;height: 15em;}
	.button-arrow {flex: none;width: 4em;height: 4.5em;}
	.item-data {font-size: 20px;}
	.par-md.cc-center-on-mobile {text-align: center!important;padding-left:4rem!important;padding-right:4rem!important;}
	.centered {padding-top:0rem!important;text-align:center!important;padding-left:4rem;padding-right:4rem;}
	.heroheading{padding-top:0rem!important;text-align:center!important;padding-left:0rem;padding-right:0rem;}
	.cloneable {margin-top: 0px!important;margin-bottom: 0px;min-height: 500px!important;}
	.sectionskills .container .card-inner {height: 11.75rem;}
	body article header {min-height: 300px!important;}
	
	p.subIntro {
    margin-bottom: 20px;
    margin-top: 40px;
    color: #232323;
    font-size: 25px!important;
    font-family: 'Khula', sans-serif;
	line-height: 2.2rem!important;
	text-align:left;
	}
	
	h4{padding-left:4rem!important;padding-right:4rem!important; }
	h5{padding-left:4rem!important;padding-right:4rem!important; }
	.summary-item h5{padding-left:0rem!important;}
	.mainarticle h5{padding-left:4rem!important}
	
	.headerabout {min-height: 300px!important;}
	body .item-text {width: 100%!important;}
	body .summary .summary-item {width: 100%!important;}
    .portrait {
    width: 100%!important;
    margin-top: 8rem!important;
    margin-bottom: 0rem!important;
    padding-right: 4rem!important;
	padding-left: 4rem!important;
    border-radius: 10px;
    scale: 1;
	}
	.content-section ul {width: 100%;height: 100%;text-align: center;}
	.content-section-title {
    color: #232323;
    margin-bottom: 14px;
    font-size: 25px;
    font-weight: 700!important;
	line-height:1.3;
	padding-bottom:1rem;
	}
	.content p{padding-bottom:0rem!important;}
	body .summary {margin-top: 5rem;padding-left: 3rem!important;padding-right: 5rem!important;}
	.bubble-wrap{
	width:100%!important;
	overflow:hidden!important;
	scale:1!important;
	padding-top:0rem!important;
	height:600px!important;
	}
	
	element.style {
    width: 100%!important;
	overflow:hidden!important;
    margin-top: 13rem!important;
    padding-right: 6rem!important;
    border-radius: 10px;
    scale: 4;
	}
	
	body .summary .summary-item .item-title {
    color: #232323;
    font-size: 25px!important;
    font-weight: 900;
	line-height: 1.8rem!important;
	padding-right:2rem!important;
	width:100%!important;
	}
	
	body .item-text {
    font-size: 20px!important;
	font-weight:900!important;
	line-height: 1.8rem!important;
	padding-right:2rem!important;
	width:100%!important;
	padding-bottom:0rem!important;
	}
	
	.middletitle p{
	padding-left:5rem!important;
	padding-right:5rem!important;
	}
	
	.middletitle p{
	padding-left:5rem!important;
	padding-right:5rem!important;
	}
	
	.middletitle{
	padding-left:4rem!important;
	padding-right:4rem!important;
	}
    
	body .main-article {padding-top:5rem!important;}
	.hs__item {flex-basis: calc(130% / 2 - (0px * 2) - (0px / 2))!important;margin-left: 220px;}
	.status-button {
    font-size: 1.2em;
	font-family: 'Khula', sans-serif;
    margin-top: 1rem;
    padding: 11px 24px;
	}
	
	
	body.nav-active .nav:before {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
	}
	
	.nav__list {
    display: block;
    height: 100%;
    align-items: center;
    transition: 0.2s ease-in-out;
	}
	
	.count-column h2 {font-size: 3em!important;}
	
	body.nav-active .nav:after {
	-webkit-transition-delay: .1s;
	transition-delay: .1s;
	height: 200vh;
	}	
	.hs {width: 90%!important;overflow:hidden!important;}
	.productvideo {display:none!important;}
	.main-article h5 {
    line-height: 3rem;
	font-family: 'Gilroy-Bold ☞', sans-serif!important;
	font-weight: 900;
	padding-bottom:0rem!important;}
	
	.button-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start!important;
    width: 187px;
    margin-left: auto;
	}
	
	body .summary {
    margin-top: 5rem;
    padding-left: 4rem!important;
    padding-right: 4rem!important;
	}
	
	body .main-article p {
    font-size: 23px!important;
    font-family: 'Khula', sans-serif;
    margin: 0.625rem 0 1.25rem;
    line-height: 1.6;
    vertical-align: baseline;
	padding-bottom:0rem!important;
	}
	.button-wrapper {
    display: block!important;
	}
	.status-button {
    font-size: 30px;
    font-family: "Khula"!important;
    margin-top: 0px!important;
    padding: 0px 0px;
    text-align: left!important;
}
	
	.testimonials .box {
    box-shadow: none!important;
    padding: 0rem;
    
}
	
	.centeredwhite2 {padding-top: 0rem!important;}
	.lower-header {
    margin-top: 5rem;
    padding-left: 4rem;
    padding-right: 4rem;
	}
	
	.content-section ul li {
    list-style: none;
    padding: 10px 0px;
    display: flex;
    align-items: center;
    font-size: 16px;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    transition: 0.3s;
	}
	
	.status-circle {
    width: 6px;
    height: 6px;
    background-color: #396df0;
    position: absolute;
    border-radius: 50%;
    top: 9px;
    left: -20px;
	}
	
	.scroller-img {max-width: 330px;max-height: 130px;}
	.products {
    display: flex;
    align-items: center;
    width: 150px;
    margin-bottom: 1rem;
	}
	
	.cd-header {font-weight: 200;padding-left: 2rem;padding-right: 0rem;}
	.mainBigTitle {font-size: 3rem!important;text-align:left;}
	
	body .summary3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 25px!important;
	line-height: 2.2rem!important;
	text-align:left;
	}
	
	body .testimonials {
    margin-top: 5rem;
    padding-left: 4rem!important;
    padding-right: 2rem!important;
	}
	
	.testimonials .box p {margin-bottom: 20px;color: #232323;font-size: 20px!important;}
	.testimonials .box h3 span {font-size: 25px!important;}
	.content {margin-left:0rem!important;padding-left:0rem!important;width:100%!important;padding:0rem!important;}
	.content h3{line-height:0.5!important;}
	.sectionskills .container .cardskills .content h3 {padding-bottom:1rem!important;padding-top:3rem!important;}
	 .palete--square .palete-color {height: 30%;}
	.content-section ul li {display:block!important;}
	.hs__item {flex-basis: calc(160% / 3 - (0px * 2) - (0px / 3))!important;margin-left: 220px;}
	.container {max-width: 160%;width: 160%;margin-left:0rem!important;}
	body .mapContainer {margin-top: 5rem;padding-left: 3rem!important;padding-right: 3rem!important;}
	.button-wrapper{margin-left:0px!important}
	
	.status {
    margin-left: 1.6rem;
    width: 140px;
    font-size: 15px;
    position: relative;
	}
	
	.profile {max-height: 100%!important;}
	.profile-image{display:block!important;width:100%!important;height:100px;}
	.profile-image {height: 300px!important;width: calc(100% - 90px);}
	
	body section.container{
	display:block!important;	
	margin-left:0px!important;
	}
	
	section p {
    font-size: 23px;
	padding-left: 0rem;
    padding-right: 0rem;
	}
	
	h1.first-name {
	padding-left: 2rem;
    padding-right: 2rem;
	top: 5px;
	}
	
	.profile-info {
    margin-top: 120px;
    padding: 13% 0% 2% 0%;
    position: relative;
	}
	
  	body .main-article {
    padding-left: 0rem!important;
    padding-right: 0rem!important;
	padding-bottom:5rem!important;
	padding-top:10rem!important;
	}
	
	.w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c02-628bff5d {grid-area: span 2/span 2/span 2/span 2;justify-self: start;}
	.w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c02-628bff5d {grid-area: span 2/span 1/span 2/span 1;justify-self: start;}
	.ds-grid {
    grid-template-rows: auto;
    grid-template-columns: 2fr 1fr;
    grid-auto-columns: 0fr;
	display: grid;
	}
	
	.w-node-_3fe515aa-2e07-1e22-9731-3690ead37cea-628bff5d {
    grid-area: span 2/span 2/span 2/span 2;
    place-self: start;
	padding-left: 4rem!important;
    padding-right:4rem!important;
	}
 
	.w-node-_3fe515aa-2e07-1e22-9731-3690ead37cec-628bff5d, .w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c02-628bff5d {
    grid-area: span 1/span 2/span 1/span 1;
    justify-self: start;
	}
	.w-node-_1cb52a33-9938-af88-46a5-2346c4ea2c0d-628bff5d, .w-node-_3fbd4c4b-761f-b345-59fb-2ad9dbb5f022-628bff5d {
    grid-area: 1/span 2/span 1/span 1;
    justify-self: start;
	padding-left: 4rem!important;
    padding-right:4rem!important;
    }
	.w-node-_3fbd4c4b-761f-b345-59fb-2ad9dbb5f024-628bff5d {
	grid-area: span 2/span 2/span 2/span 2;
	}
	
	body .blu .main-article .centeredwhite{padding-top:0rem!important;}
	.sectionskills .container .cardskills .content h3 {padding-bottom:1rem;}
	
}



@media screen and (max-width: 450px) {
	
	.hero {
		width:100%;
		overflow:hidden!important;
	}
	.hero h1 {
    	font-family: 'Gilroy-Bold ☞', sans-serif!important;
		padding-left:2rem!important;
	    padding-right:2rem!important;
		font-size:42px!important;
		line-height:1!important;
	}
	
	
	.hero h2 {
    font-family: 'Khula', sans-serif;
    	padding-left:3rem!important;
	    padding-right:3rem!important;
		font-size:25px!important;
		margin-bottom:0rem!important;
	}
	
	.hero a.btn {
    padding: 20px 46px;
    font-size: 15px!important;
    }
	
	body .main-article p {
	font-family: 'Khula Regular', sans-serif!important;
	font-size: 23px!important;	
	padding-left:4rem!important;
	padding-right:4rem!important;
	}
	
	.name {
	font-family: 'Khula Regular', sans-serif!important;
	font-size: 25px!important;
	padding-left:3rem!important;
	padding-right:3rem!important;
	line-height:2.8rem;
	color:white!important;
	}
	
	h6{
	font-size: 25px!important;
	}
	
	.status-button {
    font-size: 20px!important;
    font-family: "Khula"!important;
    margin-top: 0px!important;
    padding: 0px 0px;
	}

	.card-container p{
	font-size: 20px!important;
	padding-left:3rem!important;
	padding-right:3rem!important;
	padding-bottom:2rem!important;
	line-height: 1.5rem!important;
	}
	.skills ul li {
    border: 1px solid white;
    border-radius: 2px;
    display: inline-block;
    font-size: 15px;
    margin: 0 7px 7px 0;
    padding: 10px;
	line-height:1.8rem!important;
	width:100%!important;
	font-family: 'Khula Regular', sans-serif!important;
	}
	body article .reduceleft {
    padding-top: 5rem;
    padding-left: 0rem!important;
    padding-right: 0rem!important;
    padding-bottom: 11rem;
    margin-top: -2rem!important;
	}
	.centeredwhite {
    font-weight: 700;
    line-height: 1.3!important;
    text-align: center!important;
    font-size: 40px;
    color: white!important;
	padding-right: 4rem!important;
	padding-left: 4rem!important;
	}
	
	.centeredwhite2 {
    font-weight: 500;
    line-height: 1.3!important;
    text-align: center!important;
    font-size: 40px;
    color: white!important;
	padding-right: 0rem!important;
	padding-left: 0rem!important;
	width: 70%!important;
    display: block;
    margin: 0px auto 0px auto;
	}
	
	span .centeredwhite {
    font-size: :25px!important;
	}
	
	span .centeredwhite2 {
    font-size: :25px!important;
	}
	
	
	button.primary {
    background-color: white;
    margin-top: 1rem;
    border: 1px solid white;
    border-radius: 3px;
    color: #B3B8CD;
    font: bold 20px "Open Sans", sans-serif;
    font-weight: 500;
    padding: 10px 25px;
    margin-bottom: 6rem;
	}
	
	body article .reduceright {
    padding-top: 0rem!important;
    padding-bottom: 3rem!important;
    }
	
	body article .reduceright {
    padding-top: 0rem!important;
    padding-bottom: 3rem!important;
    }
	
	.profile {
    margin-bottom: 10rem!important;
	}
	
	.main-article h5 {
    padding-top:3rem!important;
    font-size: 40px!important;
	}
	
	.testimonials .box h3 {
    font-size: 25px!important;
}
	.testimonials .box h3 span{
    font-size: 20px!important;
}
	
	.testimonials .box p {
    font-size: 20px!important;
    font-weight: 540!important;
		padding:0rem!important;
    
}
	#reveal111 {
    
    width: 100%!important;
    margin-left: 0rem!important;
    margin-right: 0rem!important;
	padding-left: 0rem!important;
    padding-right: 0rem!important;
	}
	
	#w-node-_3fe515aa-2e07-1e22-9731-3690ead37cec-628bff5d {
	width: 100%!important;
    margin-left: 0rem!important;
    margin-right: 0rem!important;
	padding-left: 0rem!important;
    padding-right: 0rem!important;
	}
	
	#w-node-_3fe515aa-2e07-1e22-9731-3690ead37cec-628bff5dd {
	width: 100%!important;
    margin-left: 0rem!important;
    margin-right: 0rem!important;
	padding-left: 0rem!important;
    padding-right: 0rem!important;
	}
	#w-node-_3fe515aa-2e07-1e22-9731-3690ead37cec-628bff5ddd {
	width: 100%!important;
    margin-left: 0rem!important;
    margin-right: 0rem!important;
	padding-left: 0rem!important;
    padding-right: 0rem!important;
	}
	
	.content-section {
	padding-left: 0rem!important;
	}
	
	.content-section-title {line-height:2.8rem!important;font-size: 25px;}
	.content-section-title {font-size:25px;}
	
	.content-section ul li {
    padding: 30px 38px;
    display:
    align-items: center; flex;
    font-size: 16px;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    transition: 0.3s;
    color: #232323!important;
    font-family: 'Khula', sans-serif!important;
	}
	
	.button {
    width: 16em;
    height: 16em;
}
	.buttons{
	padding-bottom:0.3rem!important;
	}
	
	button.primary{
	margin-bottom:1rem!important;
	display: block;
    width: 100%;
	}
	
	button.primary.ghost{
	margin-bottom:6rem!important;
	}
	
	.button-arrow {
    flex: none;
    width: 4em;
    height: 3.5em;
}
	
	.count-column {
    height: 4.6em;
    overflow: hidden;}
	
	.main-article h5 {
    padding-left:4rem!important;
	padding-right:4rem!important;
	font-weight:700!important;
	padding-bottom:3rem;
	}
	
	.status-button {
    font-size: 20px!important;
    font-family: "Khula"!important;
    margin-top: 15px!important;
    padding: 0px 0px;
}
	.list-palete {
    width: 70%;
    float: center;
    margin-bottom: 4rem;
    padding-top: 3rem;
		margin: 0px auto 0px auto;
}
	.list-palete > .palete {
		width: 100%;
		margin: 0px auto 0px auto;
		float: left;
	}
	body .summary {
    padding-left: 4rem!important;
	}
	
	.ds-image-wrap.cc-85 {
    width: 100%;
    display: flex;
    margin-left: 0rem!important;
    padding-left: 0rem!important;
    padding-right: 0rem!important;
	}
	
	.ds-grid {
    margin:0px auto 0px auto!important;
    }
	
	.marginleft {
    margin-left: 0rem!important;
	}
	
	body .main-article {
    margin-top:-3rem!important;
    overflow: hidden!important;
	}
	
	.button-pl {
	margin-bottom:6rem!important;
    font-size: 1.4rem!important;
	padding-left: 3rem!important;
    padding-right: 3rem!important;
	}
	
	.button-pl.a-cta {
    display: block;
    width: 70%;
    margin: 30px auto 0px auto;
	}
	
	.overlay-inner {margin-top: .5rem;}
	
	.cloneable {
    padding: var(--container-padding);
    justify-content: center;
    align-items: center;
    min-height: 800px;
    display: flex;
    position: relative;
    margin-top: -180px;
    margin-bottom: 180px;
}
	.caption {font-size: .75em!important;}
	.slide-caption {display: none!important;}
	
	.status-button {
    font-size: 20px!important;
    font-family: "Khula"!important;
    margin-top: 0px!important;
    text-align: center;
    width: 100%;
}
	.content-section-title {
    font-size: 25px!important;
    font-weight: 700!important;
}
	
	.status-button {
    font-size:20px!important;
    text-align: center;
    width: 100%;
}
	
	.content-section-title {
    font-size: 25px;
    font-weight: 700!important;
	}

	.skills {
    padding: 5rem;
    margin-top: 30px;
	display: none;
	}
	.card-container .round {
    border: 12px solid var(--pl-purple-main);
    border-radius: 50%;
    padding: 7px;
    margin-top: 50px;
    width: 200px;
	}
	.card-container .pro {
    display: block!important;
    position: relative!important;
    width: 100%!important;
    margin: 30px auto 0px auto!important;
	display:none!important;
    
	}
	
	.logo-wrap {
	margin-left: -15%;
	}
	.logo-wrap a {
    cursor: pointer;
    font-weight: normal;
    font-size: 20px!important;
	}
	.overlay-inner {
	flex-flow: column;
	justify-content: space-between;
	align-items: flex-start;
	height: 100%;
	display: flex;
	}
	.slider-list {
    margin-top: 4rem;
	}
	.fullLinkImage{
	scale:1!important;
	margin-top: -8rem!important;
	}

  .scroller-container {
    overflow: hidden;
	width:100%!important;
	overflow: hidden;
    margin-top: 00px;
    margin-bottom: 300px;
  }
  .info {
    display: block;
    text-align: center;
  }
	#map{padding-left:0rem!important;
	padding-right:0rem!important;
}
  .info h1 {
    margin: 0;
 *
	  }
	  
	  
	  @media only screen and (max-width: 380px){

		.palete--square .palete-color {
		height: 30%;
		}

	}